CODEWITHSUNDEEP
cssheightequals
Max Popkin
Max Popkin

Reputation: 99

Two columns equal height only css (no display: table, table-row, table-cell)

In CSS, I can do something like this: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png

But I've no idea how to change that to something like: http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png

The height is not fixed

Please help me do it! Thank you all in advance!

Upvotes: 9

Views: 17160

Answers (5)

manonatelier
manonatelier

Reputation: 343

I use this, pure css.

The html:

<div id="container" class="holder">
    <div id="column-one" class="even-height">TEXT</div>
    <div id="column-two" class="even-height">TEXT</div>
</div>

The css:

.holder {
   overflow: hidden;
   clear:    both;
}
.holder .even-height {
   float: left;
   padding-bottom: 100000px;
   margin-bottom:  -100000px;
}
#column-one { width: 30%; }
#column-two { width: 70%; }

The columns can be any width you want actually. Anyway, super simple and cross-browser friendly.

Upvotes: 26

Faust
Faust

Reputation: 15404

I like broh's/manonatelier's better (+1 to each), but if you really want a solution that is utterly independent of the amount of content inside, I would use the old technique of design 'hooks': http://jsfiddle.net/GTY8P/

...Uses more markup and CSS.

Upvotes: 2

Idrizi.A
Idrizi.A

Reputation: 12010

Check this

HTML

<div class="box" >
    <div class="box1">TEXT</div>
    <div class="box2">TEXT</div>
</div>​

CSS

    .box{
    background:#000;
    height:60px
}

.box1{
    float: left;
    background-color: #fff;
    margin: 10px;
    text-align:center;
}
.box2{
    float: left;
    background-color: red;
    margin: 10px;
    margin-left:5px;
    text-align:center;
}​

See the demo here : http://jsfiddle.net/X3UY9/1/

Upvotes: -1

0b10011
0b10011

Reputation: 18795

Variable height wrapper with equal-height columns

HTML

<section class="wrapper">
    <section>a</section>
    <aside>b<br>c</aside>
</section>

CSS

/* Set @max-column-height to greater than the maximum height of the tallest column */
.wrapper {
    overflow:hidden;
    margin:10px;
}
.wrapper > section {
    background:red;
    width:50%;
    float:left;
    padding-bottom:1000px; /* @max-column-height */
    margin-bottom:-1000px; /* @max-column-height */
}
.wrapper > aside {
    background:orange;
    width:50%;
    float:left;
    padding-bottom:1000px; /* @max-column-height */
    margin-bottom:-1000px; /* @max-column-height */
}

Upvotes: 9

David B&#233;langer
David B&#233;langer

Reputation: 7438

Make a wrapper with a div like this :

<div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

Apply a style like that :

.wrapper {
    height: 400px;
}

.wrapper .box{
    float: left;
    height: 100%;
    width: 200px;
    background-color: red;
    margin-right: 10px;
}​

Didn't try, but will work.

EDIT jsFiddle : http://jsfiddle.net/NXjk4/

Upvotes: -1

Related Questions