[Solved] Two Columns Not Working

[mintertweed]

I feel like this is probably something really simple to fix and I’m just not seeing it. Here is the website. Now, for some reason, the content is going into the footer and pushing the social icons over because of the left column. Why it’s doing this, I have no clue. Here is my CSS:

.page-about .left {
    width: 420px;
    float: left;
    padding: 0 20px 0 0;
    position: relative;
    margin-top: -12px;
}

.page-about .right {
    width: 420px;
    float: left;
    padding: 0 0 0 20px;
    position: relative;
}

I tried using the CSS column method, but 1) it gives you no control over where the content breaks, and 2) it didn’t work. I literally copied the bits of code from CSS-Tricks and placed it on the site and nothing was happening.

Thanks in advance for anything you guys can tell me!

[Paulie_D]

You have overflow:hidden commented out on #main-content…so it looks like the floats aren’t clearing.

If I re-enable it…the problem looks to solve itself.

[mintertweed]

That’s odd. It does indeed work, I just don’t understand the logistics of it. I’m glad I have a function in functions.php that gives each page a class name because I need the overflow on the home page and blog posts to be visible. I simply targeted the .page-about and applied overflow: hidden; to that page only.

[Merri]

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.

[Author]

Posts