Three columns of equal length Options

[DavidRoel]

I am trying to get three columns of equal length, with content of unequal length. I found a method that seems like it should work at http://callmenick.com/post/css-equal-heigh...-different-ways of setting the overflow on the parent container to hidden. But I can't get it to work: http://daveroel.comyr.com/penny/penny.htm

HTML:

CODE

<div class="container">
<div class="column-center"><div id="content">
<p>Content of the middle column</p>
<p>Lorem ipsum ...</p>
</div></div>
<div class="column-left">Column left</div>
<div class="column-right">Column right</div>
</div>

css:

CODE

#main { width: 900px; margin: auto;
background: #cecece; color: inherit }
#content { background: #e6e2e3; color: inherit;
width: 70%; margin: auto;
padding: 1em }
#topnav { background: #000; color: #fff; width: 900px; font-weight: bold }
ul#topnav, #topnav li { list-style: none; margin: 0; padding: 0 }

ul#topnav { padding: .5em 0 .5em 1em }
#topnav li { display: inline;
margin-right: 2em }

#content p { margin-left: 3em }
.main .container {
padding-right: 230px;
overflow: hidden;
}
.content {
float: left;
width: 100%;
background-color: #E6E2E3;
}
.column-left{ float: left; width: 170px; background: #9fb6c6; padding-bottom: 99999px; margin-bottom: -99999px;}
.sidebar {
float: right;
margin-right: -330px;
width: 300px;
background-color: #fff;
}
.content,
.sidebar {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
section,
aside {
padding: 30px
}
.column-right{ float: right; width: 170px; background: #9fb6c6}
.column-center{ display: inline-block; width: 560px; background: #E6E2E3}

Any help very gratefully appreciated!

[pandy]

I'm staring myself blind at this. The problem is obvious, the overflow: hidden declaration doesn't "take". If you put it in a style attribute in the DIV.container tag all is well. But I don't see what goes wrong. The selector matches AFAICS and I don't see any other rule contradicting that one.

I can't stare any longer right now. My screen is BSODed and flicker and I'll throw a fit if I don't give it a rest. But this is so far I've gotten.

[pandy]

Bah, I found it! You use .main in the selector but the DIV has the id main, not class.

Alas the layout goes all wonky if I change the selector to use the ID...

You have no syntax errors neither in the HTML nor the CSS, except for a non essential error for your host's stats script, so no clues there.

[pandy]

Seems the padding is wrong. If I remove that declaration it looks OK.

So instead of this

CODE

.main .container {
    padding-right: 230px;
    overflow: hidden;
}

use this.

CODE

#main .container {
    /* padding-right: 230px; */
    overflow: hidden;
}

The right column doesn't get equal height though. Should it?

[pandy]

Right. If you want the right column to have the same height you need to give it the 'padding-bottom: 99999px; margin-bottom: -99999px' treatment.

This was a good trick. I hadn't seen it before, so thanks for that.

[DavidRoel]

CSS Ninja! Your Kung Fu is excellent! Thank you!

[pandy]

CSS Ninja! Your Kung Fu is excellent!

Ya bet ya!

Thank you!

You're welcome.

[pandy]

Hey, if you still read, isn't the solution you use for equal columns the same as Solution A here?
http://css-discuss.incutio.com/wiki/Any_Column_Longest

They talk about it being buggy with anchors, but I don't know when that was written, probably long ago. Know something about that?

[pandy]

I decided to not be so lazy and tested myself. They are correct. This method doesn't work if there are links within the document. But I don't see it what they describe as "revealing the empty space" as the problem. Of course there is empty space under the shorter column. The main problem is that the browser scrolls down so the linked to spot is at the top, but because of the overflow: hidden the top of the page is now cut off and it isn't possible to scroll up again.

Well, still a neat trick if one keeps that in mind.