Hello.. I have a skin which is simple in that there is one top content panel and two columns below; left and right (see code below).
If there is something in the right column which is larger height-wise than the left column, everything below the left column is white. Even though the left column should have a blue background.
Is there anything I can add so that the left column has it's blue background all the way to the bottom of the page? And something which will work in all browsers? ha-ha.. IE seems to have issues when Opera, Chrome and Firefox do not..
Thanks.. -Jeff
index.ascx
<div id="fullbody">
<div id="body_wrapper">
<div id="one_column">
<div class="ContentPane" id="ContentPane" runat="server" visible="false"></div>
</div>
<div id="two_column">
<div class="left_twocolumn" id="LeftPane" runat="server" visible="false"></div>
<div class="right_twocolumn" id="InfoPane" runat="server" visible="false"></div>
</div>
<div style="clear: both;"></div>
</div>
</div>
skin.css
.ContentPane
{
vertical-align: text-top;
text-align: left;
padding-left: 5px;
padding-right: 5px;
color:#333333;
font-size: 12px;
font-family: Arial;
}
.left_twocolumn
{
background-color: #CAD2E6;
border-bottom: 1px solid #DBE0EE;
border-right: 1px solid #85A1D1;
width: 161px;
vertical-align: text-top;
float: left;
}
.right_twocolumn
{
vertical-align: text-top;
float: right;
padding-left: 5px;
padding-right: 5px;
width: 775px;
color:#333333;
padding-top: 24px;
padding-bottom: 24px;
font-size: 12px;
font-family: Arial;
text-align: left;
}