How can I make this border extend?

Hi,

Does it have to do with clearing? I would like the border between the left and right panes to autosize to the pane that is taller...


.main
{
height: 500px;
background: #ffffff;
color: #000000;
}

.leftpane
{
float: left;
width:610px;
border-right: 5px solid #000;
padding: 20px;
padding-top: 0px;
}

.rightpane
{
float: left;
width:280px;
padding: 20px;
padding-top: 0px;
}


Thanks,

Alan

You can make height:100% of both the panes....


Cheers :)

For that, you'd need to use a faux column technique (http://www.alistapart.com/articles/fauxcolumns/).

Hi,

Thanks guys - I will try that.

One other question - if I remove the height: 500px; from the .main (it was there for testing), I noticed that the leftpane and rightpane lose their white background. Shouldn't these inherit the background from .main?


<div class="main">
<div class="leftpane">
content
</div>
</div>


Thanks,

Alan

Shouldn't these inherit the background from .main?

It's because of the floats applied to the inner elements. You need to clear it (http://www.quirksmode.org/css/clearing.html).