Clearing Floats

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Clearing Floats

Post by HiddenS3crets »

I have a 3-column template where the left and right columns float and the middle (main content) column is centered through auto margins. Inside my main content box I have a 3-column list of links which also floats left in order to work properly. The problem is that any content I put after this 3-column list lays over the links, but if I try clearing it using clear: left, then my content that should display under the links will also clear the left column of the website, leaving a big whitespace between my 3-column list and the rest of the page content.

Any ideas on a fix for this? I was trying to go with a CSS approach for the 3-column list if it can still be done.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: Clearing Floats

Post by jayshields »

Link us to an example if possible, if not, post your code.
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Re: Clearing Floats

Post by HiddenS3crets »

here's a basic layout of what the problem is:
Image
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Clearing Floats

Post by kaszu »

Put around "3-column list" a container div with style "width: 100%; overflow: hidden", that should clear the floats;
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Re: Clearing Floats

Post by HiddenS3crets »

thanks dude, that works perfectly. Could you perhaps explain why it does? =)
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Clearing Floats

Post by kaszu »

I can only guess, but could be because you have floated columns to left and right of the content, but content is not floated by itself, then using clear: left will clear float on the left and the content will be brought below left column, even if it's not the sibling of the actually floating element.
Not sure, but maybe your left column and main content is overlapping.

Solution was to clear "3-column list" using previously posted trick, which clears only elements, which it is containing. But that also creates a problem that if you will want to move one of the "3-column list" elements outside the container (by minus margin or some other way), then that part wont be visible because of the overflow.

Another solution was to float the main content (center column).
Post Reply