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! 😛

 

[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! 😛

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 😱)