How can I achieve this in CSS? Pic attached.

http://img41.imageshack.us/img41/9028/samplen.gif

I have this laid out on a 12 column grid. Basically, I want to stretch the length of the left div (.grid_4) to the same height as the div to the right without giving it a height attribute since the height of the right div (.grid_8) will always grow or shrink with content. Also, I want to vertically center the h2 element inside that first div.

HTML

<div class="containerdiv">
<div class="grid_4">
<h2>"Lorem Ipsum Lorem Ipsum"</h2>
</div>
<div class="grid_8">
Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum
</div>
</div>


CSS

.containerdiv {
border-bottom:1px solid #EFEFEF;
margin-bottom:30px;
overflow:hidden;
}

.grid_4 {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
position:relative;
width:300px;
}

.grid_8 {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
position:relative;
width:620px;
}

Please help if you can. Thanks.

look up 'faux columns'

basically, if the two divs will alwways be the same width then you could assign a background to the container div which looks like the two divs are the same height.

You could, instead, use a bit of JS. I would run with the faux columns plan first.

bazz

I understand using faux columns but how would I get the h2 element to always center vertically in the left div?

I think I can get it working by inserting 2 columned tables in the divs but would using tables in a situation like this be accepted or is that bad coding practice?

I understand using faux columns but how would I get the h2 element to always center vertically in the left div?

Have a look at some centering techniques that may work for you at http://nopeople.com/CSS/vertical%20center%20with%20CSS/ (view the source to see how they are coded)

Have a look at some centering techniques that may work for you at http://nopeople.com/CSS/vertical%20center%20with%20CSS/ (view the source to see how they are coded)
Thanks for the help but I need it to be cross browser compatible; plus, the divs will grow and shrink so I can't set a height attribute like in the examples.

I don't have one but I imagine you could find a js script that would do that for you.