SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    layout not floating properly

    Hi, I am trying to set up the basic layout of my page using float. Everything seems to work except the main body will not appear next to the left vertical menu and instead appears at the bottom of it. The html is:

    <body>
    <div id="wrapper"><div id="banner"></div><div id="nav"></div><div id="main"></div>
    <div id="footer"></div></div>
    </body>
    </html>

    And the Css is:

    body{margin:0; padding:0;}

    #wrapper{width:800px; height:750px; border:#0033CC; border-width:thin; border-style:groove;
    }

    #banner{float:left;width:800px; height:120px; border:#990033; margin-top:5px; margin-left:5px; border-width:thin; border-style:groove; background-image: url(../elsculpts.jpg);
    }
    #nav{clear:left; width:200px; height:450px; margin-top:5px; margin-left:5px; border-width:thin; border-style:groove; border:#00CC33; background:#FFFFFF url(../gradpole.jpg) no-repeat;
    }
    #main{float:left; width:450px; height:450px; margin-left:5px; margin-top:5px;border-width:thin; border-style:groove; border:#00CC33; background-color:#99CC00;
    }
    #footer{clear:both; width:800px; height:100px; margin-top:5px; margin-left:5px; border-width:thin; border-style:groove; border:#00CC33; background-color:#00FFCC; margin-top:5px;

    }

    any ideas how i can rectify this?

    thanks for your time

    onwards and upwards

    cass27

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You haven't floated the #nav which means that #main will start underneath. You need to float the #nav as well.

    Code:
    #nav{float:left;}
    It is unlikely that setting a height on those elements is going to be any use for you because that will restrict the layout to always being that high. You should let content dictate the height instead.

  3. #3
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You haven't floated the #nav which means that #main will start underneath. You need to float the #nav as well.
    thanks this works. What confuses me is why i did not need to use clear for #nav so it started on the next line? I suppose as there was no room on the previous line it would automatically start on the next line anyway. (im getting good at this, im finding my own answer before I've finished asking the question )

    cass27

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    did not need to use clear for #nav so it started on the next line? I suppose as there was no room on the previous line it would automatically start on the next line anyway.
    You got it

    Floats will fill the space available and if there is no room then they will try and find space underneath. (This can be a problem in IE when it will drop floats in a fluid layout even when there is no underneath.)

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As an aside note there's really no need to float your 'banner' <div> or give it a width.

    A child container will extend the full width of its parent container. So if that's what you require then no need to declare a width.

    Also the only time you should be giving your containers a height is when you know what height they will be. At this stage I can't be sure what it is you are doing but generally speaking don't use height to control the depth of your design, let the content itself do that.

    The word' 'banner' for a <div> isn't such a great idea as Nortons security may attempt to block it form view.

  6. #6
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by osgood View Post
    Also the only time you should be giving your containers a height is when you know what height they will be. At this stage I can't be sure what it is you are doing but generally speaking don't use height to control the depth of your design, let the content itself do that..
    Osgood and Paul o'b: You will be glad to know that i have taken the height out of the structure. I can see how this can be useful. the only downside to this the footer div collapses completely and can hardly be seen (even though it has a background color. I think for the future placing content in such divs will be useful

    Quote Originally Posted by osgood View Post
    A child container will extend the full width of its parent container. So if that's what you require then no need to declare a width..
    really useful imfo again. Im getting the hang of how it works now.

    Quote Originally Posted by osgood View Post
    The word' 'banner' for a <div> isn't such a great idea as Nortons security may attempt to block it form view.
    .
    this is going to change the habit of a lifetime. Header i guess is just as good.

    I think i can safely say im floating without armbands now,


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •