Topic: how to make two DIVs with same height in CSS?

Hi all,

I am not very good at CSS, and here to find some help. I want to make two divs with the same height, but i dont want to set a fixed height.

http://farm3.static.flickr.com/2270/1810339451_8b44b91ddd_o.png

i want div-left and div-right to have the same height, but dont want to set it fixed, as the content in each box is generated dynamically.

can i do it by just using CSS?

thank you.

Re: how to make two DIVs with same height in CSS?

http://www.projectseven.com/tutorials/c … /index.htm

First result in google, "two divs same height css"

Re: how to make two DIVs with same height in CSS?

thanks for the help

however, this is not a pure css solution, it has some javascripts in there.

if it gets too complicated, i think i'm just going back to use tables.

Re: how to make two DIVs with same height in CSS?

As the article explains, it would be easier doing it with tables. I honestly don't see why people spend so long on small problems like this, if there is an easier solution but with slightly more code, who cares?

Re: how to make two DIVs with same height in CSS?

I'm assuming you want two equal height columns.

Apply a bg image to the outside div that contains both of columns. It's known as "Faux Columns" by Dan Cedarholm. There's an old, indepth, tutorial on ALA.

BJ Clark
the science department
http://www.scidept.com/

Re: how to make two DIVs with same height in CSS?

I'm with Radar on this one.  CSS is supposed to make life easier, not more difficult.  Tables are still very useful in many situations.  Also, you have Rails backing you, so you may be able to fill in certain dimension variables on the fly.

Best Regards,
Bilson

Re: how to make two DIVs with same height in CSS?

I think that using the faux-column approach is your best bet. It's a bit of a hack but there's definitely no JavaScript involved.

Here is a quick example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS: Two Columns</title>
<style type="text/css" media="screen">
<!--
body{ margin:0; text-align:center; }
#wrapper{
    width:900px;
    margin:0 auto;
}
#content{
    text-align:left;
    /* REMOVE THIS LINE: */
    background:#999;
    /* AND INSERT YOUR REPEATING IMAGE HERE USING SOMETHING LIKE: */
    /* background:transparent url(/images/tile.gif) repeat-y; */
}
#left{
    float:left;
    width:385px;
    padding:30px;
    /* REMOVE THIS LINE: */
    background:#999;
}
#right{
    float:right;
    width:385px;
    padding:30px;
    /* REMOVE THIS LINE: */
    background:#bbb;
}
.clear{ clear:both; }
-->
</style>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div id="left">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus tincidunt metus. Phasellus tempor vehicula metus. Donec venenatis aliquam augue. Pellentesque gravida elementum purus. Integer iaculis. Quisque sagittis interdum sapien. Phasellus eu libero.   
            </p>
        </div>
        <div id="right">
            <p>
                Pellentesque vulputate rutrum magna. Praesent sodales elit eget libero. Vivamus a mi. Aenean non tellus. Donec in lorem. Cras vehicula. Fusce facilisis lacus sit amet neque. Donec dignissim, turpis vitae adipiscing congue, lectus sapien tincidunt tellus, at dapibus velit enim a felis. Praesent adipiscing eleifend enim. Pellentesque blandit, nunc non convallis euismod, quam nisi pretium ante, in sollicitudin sem urna ut neque. Donec aliquet congue dolor. Fusce turpis ligula, consectetuer ut, auctor quis, malesuada eget, nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus mattis volutpat tortor. Morbi sagittis, eros et porta tristique, ipsum mauris aliquam quam, at posuere lectus sem at tortor. Suspendisse orci enim, cursus et, convallis et, semper eu, dui.
            </p>
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

The .clear div (<div class="clear"></div>) makes the #content div stretch down past both of the floating divs (#left and #right). Place your tiling 2-column background image (usually just a wide GIF only 1px tall) in the #content div.

Just modify/remove the three lines in the <style>, make your repeating tile background, and your up and running.

It's quick. It's easy, and you can stay away from using tables in your main layout.

Re: how to make two DIVs with same height in CSS?

Also, there are many reasons to use divs over tables.

One that I like to remember is: less code equals smaller file sizes, which means faster downloads for your users and lower overall bandwidth used on your server.

Have you ever taken a look at a simple layout over at Microsoft.com? It's like <table> Hell over there. Just imagine the kinds of bandwidth they could save with a little CSS - while giving their viewers faster page downloads at the same time.

If I can use a div, I use it - unless I am displaying data that needs to be aligned for presentation purposes, then I'll use a table.

Chris