Three columns of equal length |
Three columns of equal length |
DavidRoel |
Dec 28 2016, 08:43 AM
Post
#1
|
Group: Members Posts: 5 Joined: 15-April 16 Member No.: 24,166 |
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 |
Dec 28 2016, 12:34 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Dec 28 2016, 12:48 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Dec 28 2016, 02:02 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Dec 28 2016, 03:37 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Dec 28 2016, 06:23 PM
Post
#6
|
Group: Members Posts: 5 Joined: 15-April 16 Member No.: 24,166 |
CSS Ninja! Your Kung Fu is excellent! Thank you!
|
pandy |
Dec 28 2016, 06:44 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
|
pandy |
Jan 15 2017, 08:02 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Jan 15 2017, 08:27 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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. |
Lo-Fi Version | Time is now: 26th April 2024 - 08:48 AM |