Make one element the same height as another.

[kd5pbo]

How does one go about making elements the same height? I have a menu and content, and would like the menu to extend down to the bottom of the content.

[toicontien]

Faux columns: http://www.alistapart.com/articles/fauxcolumns/

[mutedgirl]

Hi-
I am trying to implement the Faux Columns idea, and I'm having some issues in certain browsers- namely Netscape 7+, Mozilla for Mac, etc. I have 1 container ('main') with 2 columns inside, floated left ('sidebar' and 'content') with a cleared div under that to reset everything. I set a column-like background image for 'main' and everything looks great- then when I add in the 2 floated columns, the background image in main disappears completely (and so do the columns!) ??? Here is the code:

<div id="container">

<div id="header"></div>

<div id="main">
<div id="sidebar">
menu here
</div>
<div id="content">
<h1>page title here</h1>
</div>
<div class="break"></div>
</div>

<div id="footer"></div>

</div>

And here's the CSS:

#container {
position:relative;
margin-left:auto;
margin-right:auto;
width:777px;
}

#header {
width:717px;
height:227px;
background-image:url(images/header.jpg);
background-position:top left;
background-repeat:no-repeat;
text-align:left;
padding-top:40px;
padding-left:60px;
}

#main {
position:relative;
width:777px;
background-color:#ffffe4;
background-image:url(images/bg-main.jpg);
}

#sidebar {
position:relative;
float:left;
width:198px;
text-align:left;
border-left:1px solid #000000;
padding-top:20px;
background-color:#8fb18c;
}

#content {
position:relative;
float:left;
border-right:1px solid #000000;
width:537px;
padding-right:15px;
padding-top:15px;
padding-bottom:15px;
padding-left:25px;
text-align:left;
font-size:0.8em;
background-color:#ffffe3;
}

#footer {
position:relative;
width:687px;
height:121px;
background-image:url(images/bg-footer.jpg);
background-position:top left;
background-repeat:no-repeat;
font-size:0.7em;
text-align:left;
padding-top:45px;
padding-left:90px;
}

.break {
clear:both;
}

If anyone can help, I'd really appreciate it! This is driving me batty... I have to be able to have 2 columns of the same height going down the page, and I DO NOT want to have to switch to a table layout! eek!

You can see a live example of this here: http://72.29.83.45/~latrobe/index.php

[toicontien]

The .break DIV needs some content in it most likely. If your site has a footer to it, the footer itself is the perfect clearing element. Get rid of .break, move footer inside main and give the footer DIV the clear: both style.

[mutedgirl]

YAY! I could kiss you! You have no idea how stressed I was
yesterday... I tried about a million different ways and nothing
worked. And last night I noticed this similar issue on another site
I'm working on... now I know the fix. So simple too... :) (always is
isn't it?)