Help clear my float!

October 27, 2009 12:53 PM

CSS question: How can I get my floated sidebar to stop overlapping my footer? I'm using clear:both!

Take a look at this page.

The structure of the HTML is pretty simple:

There are three main divs - #mainheader, #maincolumn, and #footer. #Maincolumn contains another centered div - #container - which includes a div called #content, and a left-floated div called #sidebar.

After I close #maincolumn, I include a ".clear" div to clear all the floated content, and then there's the #footer.

So here's the structure:

- #mainheader
- #maincolumn
  - #container
    - #content
    - #sidebar
- .clear
- #footer

My problem is that when the text in #sidebar is longer than the stuff in #content, it overlaps the footer.

Isn't clearing all floats supposed to clear all floats? What's happening here? Thanks in advance for your help!

posted by mthomps00 to computers & internet (10 comments total)

I'd say put .clear and #footer inside of #container.
posted by rhizome at 1:46 PM on October 27

I think it's because you're only using a margin on #content, with the sidebar following it in the markup, which probably triggers some quirky float behaviour (haven't gone through all of your styling). If you give #content a width and maybe float it right instead of using a margin then it should be fine.

It's also generally safer and more intuitive to clear floats within the container element in which the elements are floated, so that all containers are extended to the height of their content.
And you've got some markup errors in there, it's always sensible to tidy those up first to rule them out.
posted by malevolent at 1:47 PM on October 27

I'd suggest adding overflow:auto; on #container, removing the clear div and adding clear:both; to #footer.

Setting overflow will force the container div to size according to it's content, allowing the footer div to know properly what it needs to be clearing.

That *should* do it, I think.
posted by BinarySolo at 2:18 PM on October 27

BinarySolo wrote "That *should* do it, I think."

Doesn't seem to; if I make the changes using the EditCSS function in the WebDeveloper toolbar, the content frame suddenly scrolls and the footer disappears.

I'd do what malevolent suggests: Might try nesting content, sidebar and footer inside the same container, in that order, with fixed width and float:left for the sidebar plus clear:both on the footer, or perhaps fix the footer in place at the bottom of the screen so that content and sidebar scroll up from behind it.
posted by caution live frogs at 2:30 PM on October 27

Perhaps you could incorporate this:

CSS Sticky Footer

Seems like it does what you're trying to implement.
posted by backwards guitar at 2:58 PM on October 27 [1 favorite has favorites]

The vogue css idiom to use for this is a "clearfix", once you figure out the browser compatibility it is quite elegant as you simply add a "clearfix" class to the parent of the floated element.

http://www.positioniseverything.net/easyclearing.html
posted by zentrification at 3:48 PM on October 27 [1 favorite has favorites]

It looks like you have a position:absolute on your sidebar div, this basically removes the div from the page flow so it won't how matter many times you clear your divs. I'd put the sidebar div above the content div and change the position to relative.
posted by bigdave at 5:26 PM on October 27

I'm not an expert, but the impression I get is that pixel positioning (position: absolute) shouldn't be mixed with floated positioning in the same element or in the same layout group. You've given the sidebar both an absolute position and a floated position. Pixel positioning takes the element out of the normal document flow and that's why I think the sidebar is not playing nice with your footer. I'd float both the sidebar and the content divs and give each a width. I don't think you need a clear div or to clear the footer after that. Here's a great tutorial on floats from Smashing Magazine. Try using these properties for a strictly float-based layout:

div#content {
width: 750px;
float: right;
}

div#sidebar {
float: left;
width: 200px;
}
posted by cowbellemoo at 5:31 PM on October 27

(or what bigdave said... :P)
posted by cowbellemoo at 5:32 PM on October 27

Thanks, everyone! I took your advice and adjusted my janky positioning scheme, and we're in the clear!
posted by mthomps00 at 9:33 PM on October 27