Coloring even heighten columns
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;
}
By floating your two inner Bars, you take them out of the normal document flow. The result is that the containing box container effectively has no content and no height.
By adding a overflow:hidden to .container you can solve that problem, but then you will run into problems if the right bar is higher than the left bar.
I also think that in order for it to work in IE6, you might need to add a zoom:1 to .container but you'll have to try that.
You have to clear the floats at end of the container. One of the ways is:
...
<div class="rightBar">
...
</div>
<br style="clear: both;">
</div>
.rightBar
{
width:30%;
float:left;
height: 100%;
background-color: red;
}
also set the height of the parent element "container" to what ever...
加载中,请稍侯......
精彩评论