Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Three columns of equal length

Posted by: DavidRoel Dec 28 2016, 08:43 AM

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-height-columns-three-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!

Posted by: pandy Dec 28 2016, 12:34 PM

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.

Posted by: pandy Dec 28 2016, 12:48 PM

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.

Posted by: pandy Dec 28 2016, 02:02 PM

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?

Posted by: pandy Dec 28 2016, 03:37 PM

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.

Posted by: DavidRoel Dec 28 2016, 06:23 PM

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

Posted by: pandy Dec 28 2016, 06:44 PM

QUOTE(DavidRoel @ Dec 29 2016, 12:23 AM)

CSS Ninja! Your Kung Fu is excellent!

Ya bet ya! IPB Image

QUOTE

Thank you!

You're welcome.

Posted by: pandy Jan 15 2017, 08:02 AM

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?

Posted by: pandy Jan 15 2017, 08:27 AM

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.