Floats: they hate me

[harveypooka]

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!

[angelwatt]

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.

[harveypooka]

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.

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

[angelwatt]

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

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/

[dcv]

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:

<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:

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 :o)