how to make two <div columns the same height

[playsunday]

I have two columns in the main body of my site..I don't want the height fixed because content changes all the time, I just want the shorter of the two columns to extend to the same height as the longer one,,anyone help..I am sure it a short piece of code, I just don't know what
Thanks

 

[aliannahfth]

Great Informative!

 

[PixelPusher]

You can use the div with content to stretch out the one without text, try this:

<div class="wrapper">
   <div id="col2">
      <div id="col1">text for column one...</div>
      Text for column two....
   </div>
</div>

Use a wrapper div to hold these, because you will want to use float clearing on the col2 div. The div for col2 will automatically grow to the same height as col1 because it CONTAINS it. When you do have content for col2 just add it in after the col1 div.

CSS

div.wrapper{
width:400px /*this is the width of both columns*/
margin:0 auto; /* set the margins for top/btm L/R, i have it set to center in the page with no top/btm margin */
}

div#col2 {
width:100%;
overflow:hidden; /* width/overflow = float clearing */
text-align:justify;
padding:0; /* use this to pad your text for col2 */
margin:0;
font:normal 10pt Arial; /* select your font weight, size, family */
color:#fff;
}

div#col1 {
float:left;
margin:0;
padding:0; /* set the padding for text in col1 */
font:normal 10pt Arial; /* select your font weight, size, family */
color:#fff;
text-align:justify;
}

This should do the trick...this is just of the top my head but i have done this stuff many times. If you get stuck just ask.

Good luck.

 

[PixelPusher]

check this article out: Creating Equal Column Heights

My idea was a simpler form of the last one, however, the other three methods are good to know.

 

[playsunday]

I am checking them out and giving it a try,,will let you know if I get it to work..Thanks

 

[playsunday]

I guess this is over my pay grade,,,not having much look translating it into my page..will keep trying

 

[playsunday]

I did it

I found another article that worked for me, here is the link
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
All I have to do now is figure out how to do the same thing withy a fixed width on the columns. If you use this link, open the examples and then view the source. I didn't even read the article, just looked at the code.
Thanks for your help pixelpusher!!

 

[PixelPusher]

I found another article that worked for me, here is the link
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
All I have to do now is figure out how to do the same thing withy a fixed width on the columns. If you use this link, open the examples and then view the source. I didn't even read the article, just looked at the code.
Thanks for your help pixelpusher!!

Your welcome, will check the article you found as well.

 

[gkumar]

in the following code I would like the div with 'y' to match the height of the div with the 3 'x's.

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
y
</div>