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.
Clearing Floats
Moderator: General Moderators
-
HiddenS3crets
- Forum Contributor
- Posts: 119
- Joined: Fri Apr 22, 2005 12:23 pm
- Location: USA
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England
Re: Clearing Floats
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
here's a basic layout of what the problem is:


Re: Clearing Floats
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
thanks dude, that works perfectly. Could you perhaps explain why it does? =)
Re: Clearing Floats
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).
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).