How to have one column's height from the maximum of another one with CSS?

Question

Possible Duplicate:
CSS - Equal Height Columns?

I need to have my container with a kind of elastic height if possible, and if not I just want my menu in sidebar height, to get the same height as the video container, as it is described here:

http://clientes.ivopereira.net/nocktv/

Any ideas how to get this done? I've tried to mix the two columns (the sidebar and the video container) into one, and tried to specify a height of 100% so therefore the div left (the column left) could maximize itself as the maximum as it cans.

Any suggestions?

Come on.. http://stackoverflow.com/search?q=equal+height+columns+css |||| http://www.google.fi/search?q=equal+height+columns+css&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fi:official&client=firefox-a — Joonas, Dec 24 '11 at 19:51
This case is a little diferente, not an usual equal height column, as I have some divs inside them. — Ivo Pereira, Dec 24 '11 at 19:53
It's not different at all. You want both columns to be of equal height. Hence the equal height columns... — Madara's Ghost, Dec 24 '11 at 19:56
As I said this is different. I am trying to positionate an element at the bottom of another element that is being floated left, therefore I can't use any table-cell or anything like that. — Ivo Pereira, Dec 25 '11 at 04:16

score 0 · Answer 1 · answered Dec 24 '11 at 20:36

0

You can't actually achieve "equal height" columns. The closest workaround that I normally recommend to use is using the Faux Columns technique.

However, looking more closely at your example link, it looks like you want your sidebar to be aligned to the bottom, not the top. I threw together a quick example of how you might want to achieve this effect. You can combine it with the Faux Columns technique as well. I'm assuming you have some proficiency in HTML and CSS, but feel free to ask any questions if you need help.

HTML:

<div id="container">
    <div class="sidebar">

    </div><div class="main">

    </div>
</div>

CSS:

#container { 
    white-space: nowrap;
    text-align: center; }
#container > div {
    white-space: normal;
    text-align: left;
    display: inline-block; }
.sidebar { 
    background: red;
    width: 200px;
    height: 100px; }
.main {
    background: blue;
    width: 300px;
    height: 200px; }

Preview: http://jsfiddle.net/Wexcode/8SnGS/

answered Dec 24 '11 at 20:36

Wex

15,539
10
64
107

You might have not met Mr.Taylor in the internets http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks ( I'm referring to your "can't make actual 'equal height' columns" ) (Which also seems to be the first search result on google in my comment to the OP) – Joonas Dec 24 '11 at 21:19
Hmm, I still stand behind what I said. If you look at http://matthewjamestaylor.com/blog/equal-height-columns-complete.gif, it shows that the 3 different blocks of content aren't actually 'equal heights'. It's more of a workaround to give the appearance of equal heights, not much different than the 'Faux Columns' technique in my post. – Wex Dec 24 '11 at 21:37
You say tomato and I say tomato. The containers are actually equal height. How do you except different a length text to all reach to the bottom? That's how text acts. The containers are infact equal height and not an illusion. Of course you stretch the text container to the bottom and not the text it self. ( It is a bit on the "heavy side", but hardly comparable to faux columns.. Even thought the initial idea is much like.. ) You can add different column colors and they're liquid columns.. Acts exactly the same as what you could achieve with javascript. – Joonas Dec 24 '11 at 21:56
I've tried but for example, just try to add some text inside the divs, and you will get it changed. – Ivo Pereira Dec 25 '11 at 04:16

score 0 · Answer 2 · answered Dec 24 '11 at 23:13

0

Just use display: table and table-cell: http://jsfiddle.net/8BXGD/

answered Dec 24 '11 at 23:13

powerbuoy

12,460
7
48
78

As I said before, I am trying to positionate an element at the bottom of another element that is being floated left, therefore I can't use any table-cell or anything like that. – Ivo Pereira Dec 25 '11 at 04:17
Why can't you use display table-cell? To me it sounds like a perfect fit. You get both equal height columns AND the ability to vertically align even block elements any way you like. – powerbuoy Dec 25 '11 at 08:25
With table-cell is creates me a kind of margin that I really don't have. Take a look: [image 1](http://img265.imageshack.us/img265/8481/tablecell1.png) [image 2](http://img835.imageshack.us/img835/3960/tablecell2.png) – Ivo Pereira Dec 25 '11 at 13:00
A kind of margin? Set margin to 0 then. And border-spacing. – powerbuoy Dec 25 '11 at 13:28
Tried that, same result. Really can't figure out why it's moving the content a lot to the bottom. – Ivo Pereira Dec 26 '11 at 00:12

How to have one column's height from the maximum of another one with CSS?

2 Answers2