The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Three columns of equal length
DavidRoel
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 28 2016, 12:34 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,510
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. unsure.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 28 2016, 12:48 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,510
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... sad.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 28 2016, 02:02 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,510
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 28 2016, 03:37 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,510
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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DavidRoel
post 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! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 28 2016, 06:44 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,510
Joined: 9-August 06
Member No.: 6



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

CSS Ninja! Your Kung Fu is excellent!


Ya bet ya! IPB Image

QUOTE
Thank you! smile.gif


You're welcome. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 15 2017, 08:02 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,510
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 15 2017, 08:27 AM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,510
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th March 2017 - 02:40 PM