Coloring even heighten columns
- by verror
I try to set different a background colors for left and right columns and to maintain the same height.
So I set a background color for outer wrapper ("container" div) so it will set a color to rightBar.
But this didn't work.
Online Demo
I want it to work on all browsers.
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div class="contentcontainer">
<div class="container">
<div class="mainBar">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
<div class="rightBar">
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body
{
font-family: Verdana,Tahoma,Arial, "Trebuchet MS" ,Sans-Serif,Georgia,Courier, "Times New Roman" ,Serif;
margin: 0px;
padding: 0px;
background: repeat-x scroll center bottom #C4DAE9;
text-align:center;
}
.contentcontainer
{
}
.container
{
margin-left: auto;
margin-right: auto;
margin-top:5px;
width: 99%;
text-align: left;
background-color:Gray;
clear:both;
}
.mainBar
{
width:70%;
float:left;
background-color:White;
}
.rightBar
{
width:30%;
float:left;
}
