...

View Full Version : How can I make this border extend?



alank2
06-12-2012, 02:04 PM
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

vikram1vicky
06-12-2012, 02:13 PM
You can make height:100% of both the panes....


Cheers :)

abduraooft
06-12-2012, 02:17 PM
For that, you'd need to use a faux column technique (http://www.alistapart.com/articles/fauxcolumns/).

alank2
06-12-2012, 02:34 PM
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

abduraooft
06-12-2012, 02:38 PM
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).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum