Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Two Columns Not Working Reply To: [Solved] Two Columns Not Working

#160115
Merri
Participant

You may find this clearfix a more appropriate solution:

#main-content:after {
    clear: both;
    content: '';
    display: table;
}

This shouldn’t mess up with with the overflow on your home page and yet it would clear the floated elements. I also recommend doing a search for clearfix as understanding it is still quite crucial in webdesign. There are several different kind of clearfixes and due to the hacky nature of floats for layout each also has their own downside.

Another alternative would be to not use floats in the first place. There are simple changes that you can do which also do not break your current layout:

#main-content {
    display: table;
    /* remove overflow: hidden; */
}

#main-content .left {
    display: table-cell;
    vertical-align: top;
    /* remove float */
}

#main-content .right {
    display: table-cell;
    vertical-align: top;
    /* remove float */
}

The advantage here is that .left and .right will be of equal height, which is something you won’t see happening with floats. The disadvantage is that some of the existing styles will no longer have an effect, position: relative;and margins in particular. Those styles have no effect on tables. There are also some minor visual differences that you can see on your other pages, but nothing really distracting that I could see.

CSS tables are supported starting from IE8.