Floats: they hate me

Discussion in 'Web Design and Development' started by harveypooka, Oct 2, 2007.

  1. harveypooka macrumors 65816

    Joined:
    Feb 24, 2004
    #1
    Evening,

    I'm floating all sorts of stuff again, about to throw my brain out the window.

    Have a peek at the code below:

    My HTML:

    <div id="header">
    </div>

    <div id="wrapper">

    <div id="menu">
    <p>Tasty menu!</p>
    <p>Lovely menu!</p>
    </div>

    <div id="content">
    <p>Random text..la la la...</p>
    <p>Random text..la la la...</p>
    <p>Random text..la la la...</p>
    </div>

    </div>

    My CSS:

    body
    {
    padding: 0;
    margin: 0;
    }

    #wrapper
    {
    width: 800px;
    border: 2px solid rgb(32,28,29);
    margin-left:auto;
    margin-right:auto;
    }

    #header
    {
    background: url(images/header.jpg) top no-repeat;
    min-height: 220px;
    margin-left:auto;
    margin-right:auto;
    }

    #menu
    {
    float: left;
    }

    #content
    {
    float: left;
    }

    All is well, but when I float the #menu and #content within the #wrapper, the border of the wrapper disappears because the #menu and #content shunt themselves out of the box...

    I've no idea what's going on. I'm baffled!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Yea, that'll happen when all of the contents are floated. There's a couple options.

    • Make the content (or menu if it's longer) not floated and use other techniques to get it to look right
    • Add some text after the floated content. I've used this a few times, just adding a paragraph with "." or "-." You can also use CSS to better hide this if you don't want it seen, though don't use "display:none"

    Both are decent options and there are others. If you need further help/advice to get this to work just say the word.
     
  3. harveypooka thread starter macrumors 65816

    Joined:
    Feb 24, 2004
    #3
    Is there any logic behind why it doesn't work?

    Either it's bizarro-logic or my brain is not in the right place! :p
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Floated elements are taken out of the page flow, and since you have all of the elements floated the page flow stops. Floated elements you'll exit with non-floating elements. See this page for some more details, http://css.maxdesign.com.au/floatutorial/introduction.htm

    Here's another read, http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
     
  5. dcv macrumors G3

    Joined:
    May 24, 2005
    #5
    Couple of ways around this. Define the sizes of each of your elements / define the positioning, etc. Or if you do want a fluid layout you need to address the problem of the page flow being screwed up by the floating content - a simple solution is to add another div (call it a footer or something) after your 2-column floats and set the clear property to 'both'. This should hopefully fix it.

    i.e. HTML:

    Code:
    <div id="header"></div>
    
    <div id="wrapper">
    
    	<div id="menu">
    		<p>Tasty menu!</p>
    		<p>Lovely menu!</p>
    	</div>
    
    	<div id="content">
    		<p>Random text..la la la...</p>
    		<p>Random text..la la la...</p>
    		<p>Random text..la la la...</p>
    	</div>
    
    	<div id="footer"></div>
    
    </div>
    
    CSS:
    Code:
    body {
    	padding: 0;
    	margin: 0;
    }
    
    #wrapper {
    	width: 800px;
    	border: 2px solid rgb(32,28,29);
    	margin-left:auto;
    	margin-right:auto;
    }
    
    #header {
    	background: url(images/header.jpg) top no-repeat;
    	min-height: 220px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    #menu {
    	float: left;	
    }
    
    #content {
    	float: left;
    }
    
    #footer {
    	clear: both;
    }
    

    (but I should say I'm no expert so this might not be the best solution :eek:)
     

Share This Page