Div layout problems.

Discussion in 'HTML' started by Ryan Knopp, Jan 26, 2007.

  1. Ryan Knopp

    Ryan Knopp Guest

    So here's what i want.
    I want the bottom div to be like a footer. The problem i'm having it
    seems is the map div. The map div is a huge huge map of 65000px by
    65000px that scrolls around with javascript (think google maps). Now
    Left div, map div and body div all work the way i want them. But i
    can't get the bottom div on the bottom of both of them.

    Left Div Body Div



    f o o t e r d i v


    kind of like my layout above. It seems like the map div is
    interfering with it somehow. If i comment out the map div the page
    works correctly. Any Ideas or suggestions? I kind of want to do this
    with out either fixed or absolute positioning.


    <script>
    #left{
    float : left;
    width : 150px;
    }
    #map{
    position : relative;
    left : 0px;
    top : 0px;
    }
    #body{
    overflow : hidden;
    position : relative;
    }
    #bottom{
    clear : both;
    }
    </script>
    ....... < other html code not relevant > .....
    <div id="left">Left</div>
    <div id="body">
    <div id="map" />
    </div>
    <div id="bottom">Bottom</div>
     
    Ryan Knopp, Jan 26, 2007
    #1
    1. Advertising

  2. Ryan Knopp

    dorayme Guest

    In article
    <>,
    "Ryan Knopp" <> wrote:

    > So here's what i want.
    > I want the bottom div to be like a footer. The problem i'm having it
    > seems is the map div. The map div is a huge huge map of 65000px by
    > 65000px that scrolls around with javascript (think google maps). Now
    > Left div, map div and body div all work the way i want them. But i
    > can't get the bottom div on the bottom of both of them.
    >
    > Left Div Body Div
    >
    >
    >
    > f o o t e r d i v
    >
    >
    > kind of like my layout above. It seems like the map div is
    > interfering with it somehow. If i comment out the map div the page
    > works correctly. Any Ideas or suggestions? I kind of want to do this
    > with out either fixed or absolute positioning.
    >
    >
    > <script>
    > #left{
    > float : left;
    > width : 150px;
    > }
    > #map{
    > position : relative;
    > left : 0px;
    > top : 0px;
    > }
    > #body{
    > overflow : hidden;
    > position : relative;
    > }
    > #bottom{
    > clear : both;
    > }
    > </script>
    > ...... < other html code not relevant > .....
    > <div id="left">Left</div>
    > <div id="body">
    > <div id="map" />
    > </div>
    > <div id="bottom">Bottom</div>


    Why the position: relative or overflow? Try it without these
    lines but put a left margin on #body (btw. slightly confusing
    name given <body> for html) to match the width of the left nav
    (plus a few px perhaps, or some padding for grace)

    --
    dorayme
     
    dorayme, Jan 26, 2007
    #2
    1. Advertising

  3. Ryan Knopp

    Ryan Knopp Guest

    On Jan 26, 3:00 pm, dorayme <> wrote:
    > In article
    > <>,
    > "Ryan Knopp" <> wrote:
    >
    >
    >
    >
    >
    > > So here's what i want.
    > > I want the bottom div to be like a footer. The problem i'm having it
    > > seems is the map div. The map div is a huge huge map of 65000px by
    > > 65000px that scrolls around with javascript (think google maps). Now
    > > Left div, map div and body div all work the way i want them. But i
    > > can't get the bottom div on the bottom of both of them.

    >
    > > Left Div Body Div

    >
    > > f o o t e r d i v

    >
    > > kind of like my layout above. It seems like the map div is
    > > interfering with it somehow. If i comment out the map div the page
    > > works correctly. Any Ideas or suggestions? I kind of want to do this
    > > with out either fixed or absolute positioning.

    >
    > > <script>
    > > #left{
    > > float : left;
    > > width : 150px;
    > > }
    > > #map{
    > > position : relative;
    > > left : 0px;
    > > top : 0px;
    > > }
    > > #body{
    > > overflow : hidden;
    > > position : relative;
    > > }
    > > #bottom{
    > > clear : both;
    > > }
    > > </script>
    > > ...... < other html code not relevant > .....
    > > <div id="left">Left</div>
    > > <div id="body">
    > > <div id="map" />
    > > </div>
    > > <div id="bottom">Bottom</div>Why the position: relative or overflow? Try it without these

    > lines but put a left margin on #body (btw. slightly confusing
    > name given <body> for html) to match the width of the left nav
    > (plus a few px perhaps, or some padding for grace)
    >
    > --
    > dorayme- Hide quoted text -- Show quoted text -


    position : relative and overflow : hidden, are there so the huge
    6500px by 6500 px map div tag inside the body tag doesn't overlap the
    left div tag.
    So pretty much what the purpose of the body tag is the hold the movable
    (by javascript) map div tag so it doesn't over lap the other div tags.
    Does that made sense? If i place the left div inside the body div the
    map div will overlap it when i move it around. It's like google maps
    with the left nav, the map in the middle and then a bottom footer (but
    google maps doesn't have a bottom footer). The problem i'm getting is
    placing the bottom div under the body and left div tag.
    Does that explain things better? Thanks for you help.
     
    Ryan Knopp, Jan 26, 2007
    #3
  4. Ryan Knopp

    dorayme Guest

    In article
    <>,
    "Ryan Knopp" <> wrote:

    > > dorayme- Hide quoted text -- Show quoted text -

    >
    > position : relative and overflow : hidden, are there so the huge
    > 6500px by 6500 px map div tag inside the body tag doesn't overlap the
    > left div tag.
    > So pretty much what the purpose of the body tag is the hold the movable
    > (by javascript) map div tag so it doesn't over lap the other div tags.
    > Does that made sense? If i place the left div inside the body div the
    > map div will overlap it when i move it around. It's like google maps
    > with the left nav, the map in the middle and then a bottom footer (but
    > google maps doesn't have a bottom footer). The problem i'm getting is
    > placing the bottom div under the body and left div tag.
    > Does that explain things better? Thanks for you help.


    Please quote the relevant bits to which you are replying. I have
    lost the proper flow of words.

    With no url, harder to say what your problem is: I can't imagine
    putting up such a huge image for the web (quite unwise) but maybe
    you are doing clever things and not putting up the whole thing at
    once.

    Anyway, keeping it simple. Why can't you have a left float, a
    right content div with a left margin set on this for the float to
    "sit in", the div will expand to fit the content. If it is a huge
    pic, scrollbars will come up. "Clear" the next div and it will be
    the footer. Have you tried doing what I said before? What
    actually happens? Why is Bob not your uncle?

    You imagine you are telling us the essential story but honestly,
    before Korpela gets on to you (he is asleep now, it is very cold
    in Iceland and I am his deputy sherrif) we better sort this out.
    Either give a url with a real gif that is, say, 6000px square
    (make a plain colour one) - don't you dare use yours, it is too
    big. And give the real code.

    Consider dropping the things I said to drop. What is the extra
    div #map doing exactly? to connect up with the JS?

    Anyway, you say:

    <div id="left">Left</div>
    > > <div id="body">
    > > <div id="map" />
    > > </div>
    > > <div id="bottom">Bottom</div>


    I suggest:

    <http://members.optushome.com.au/droovies/knopp/test.html>

    Some of the dims are only to exhibit colours for the example. You
    would not need to be putting in heights. Take a look at this in
    Firefox or Safari or any good browser. For IE 6 and below, some
    adjustments may be needed.

    --
    dorayme
     
    dorayme, Jan 27, 2007
    #4
  5. Ryan Knopp

    BootNic Guest

    > Ryan Knopp <> wrote:
    > news:
    > So here's what i want.
    > I want the bottom div to be like a footer. The problem i'm having it
    > seems is the map div. The map div is a huge huge map of 65000px by
    > 65000px that scrolls around with javascript (think google maps). Now
    > Left div, map div and body div all work the way i want them. But i
    > can't get the bottom div on the bottom of both of them.

    [snip]
    > <script>

    Style this should be yes?
    [snip]
    > </script>
    > ...... < other html code not relevant > .....

    Perhaps Doctype is relevant?
    [snip]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    * html .box {
    display: inline-block; /* trigger haslayout for < ie7 */
    }
    ..bottom {
    background-color: rgb(0, 255, 0);
    }
    ..box {
    background-color: rgb(0, 0, 255);
    overflow: hidden;
    }
    ..contentleft {
    background-color: rgb(255, 255, 0);
    float: left;
    width: 150px;
    }
    ..contentmain {
    background-color: rgb(255, 0, 0);
    margin: 0;
    padding-left: 165px;
    }
    ..contentmain p:first-child,
    ..contentleft p:first-child {
    margin-top: 0;
    }
    ..contentmain p:last-child,
    ..contentleft p:last-child {
    margin-bottom: 0;
    }
    </style>
    </head>

    <body>
    <div class="box">
    <div class="contentleft">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam elit nibh, adipiscing sit amet, tincidunt accumsan,
    lobortis at, velit.</p>
    </div>

    <div class="contentmain">
    <p>Proin ac sapien ac nibh aliquam placerat. Maecenas sed est
    ut pede tincidunt luctus. Nullam in ante. Duis in dolor.
    Pellentesque ac metus vitae mi placerat euismod. Fusce semper
    auctor leo. Vivamus et nunc sed quam tincidunt posuere.</p>
    </div>
    </div>

    <div class="bottom">
    Bottom Div
    </div>
    </body>
    </html>
    --
    BootNic Saturday, January 27, 2007 3:44 AM

    It is better to die on your feet than to live on your knees!
    *Emiliano Zapata*
     
    BootNic, Jan 27, 2007
    #5
  6. Ryan Knopp

    Ryan Knopp Guest

    BootNic wrote:
    >> Ryan Knopp <> wrote:
    >> news:
    >> So here's what i want.
    >> I want the bottom div to be like a footer. The problem i'm having it
    >> seems is the map div. The map div is a huge huge map of 65000px by
    >> 65000px that scrolls around with javascript (think google maps). Now
    >> Left div, map div and body div all work the way i want them. But i
    >> can't get the bottom div on the bottom of both of them.

    > [snip]
    >> <script>

    > Style this should be yes?
    > [snip]
    >> </script>
    >> ...... < other html code not relevant > .....

    > Perhaps Doctype is relevant?
    > [snip]
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > <html>
    > <head>
    > <title></title>
    > <meta http-equiv="content-type" content="text/html; charset=utf-8">
    > <style type="text/css">
    > * html .box {
    > display: inline-block; /* trigger haslayout for < ie7 */
    > }
    > .bottom {
    > background-color: rgb(0, 255, 0);
    > }
    > .box {
    > background-color: rgb(0, 0, 255);
    > overflow: hidden;
    > }
    > .contentleft {
    > background-color: rgb(255, 255, 0);
    > float: left;
    > width: 150px;
    > }
    > .contentmain {
    > background-color: rgb(255, 0, 0);
    > margin: 0;
    > padding-left: 165px;
    > }
    > .contentmain p:first-child,
    > .contentleft p:first-child {
    > margin-top: 0;
    > }
    > .contentmain p:last-child,
    > .contentleft p:last-child {
    > margin-bottom: 0;
    > }
    > </style>
    > </head>
    >
    > <body>
    > <div class="box">
    > <div class="contentleft">
    > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    > Aliquam elit nibh, adipiscing sit amet, tincidunt accumsan,
    > lobortis at, velit.</p>
    > </div>
    >
    > <div class="contentmain">
    > <p>Proin ac sapien ac nibh aliquam placerat. Maecenas sed est
    > ut pede tincidunt luctus. Nullam in ante. Duis in dolor.
    > Pellentesque ac metus vitae mi placerat euismod. Fusce semper
    > auctor leo. Vivamus et nunc sed quam tincidunt posuere.</p>
    > </div>
    > </div>
    >
    > <div class="bottom">
    > Bottom Div
    > </div>
    > </body>
    > </html>

    I had the doctype just left it out, didn't think it was relevant. Here
    it is. <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Trying to keep it at strict xhtml.
     
    Ryan Knopp, Jan 27, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rick Spiewak
    Replies:
    3
    Views:
    3,164
    Rick Spiewak
    Aug 26, 2003
  2. Replies:
    1
    Views:
    588
    John Timney \(MVP\)
    Jun 19, 2006
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    756
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    195
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    319
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page