Clearing all column widths

I am currently working on a design that includes a 3 column design with 2 rows of columns. The background is ending at the bottom of the longest column from the top row and I want ti to stretch to include the bottom row of divs as well but am not sure how to accomplish that in my css. The footer is properly positioned below all the content as it should, it is just the wrapper that ends at the end of the longest column in my topnav section.

Basically here is my layout in VERY rough pseudocode:

wrapper div (opened)
topnav div (opened)
topleft div (open and closed float left)
topmiddle div (open and closed float left)
topright div (open and closed float right)
topnav div (closed)
bottomnav div (opened clear both)
bottomleft div (open and closed float left)
(don’t have middle right because I don’t need those at this time)
bottomnam div (closed)
wrapper div (closed)
footer div (open and closed clear both)

Hope that is clear enough for someone to point me in a direction to find a solution. Thanks in advance for any suggestions!


Without seeing the page, we can only guess at the issue. One thing to try is to add overflow: hidden to the #wrapper div. If that doesn’t help, provide a link if possible. Issues like this are usually something very simple to fix. :slight_smile:

That was it! overflow: hidden did the trick. I knew it was something simple, just drawing a blank as to what it was!
Thanks a bunch!

Glad to assist. :slight_smile: Usually what you described points to floated items hanging outside of their container, and overflow: hidden is the easiest way to fix that … though sometimes it causes other issues, so there are some other strategies, too.