Home/ Questions/Q 815955
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T01:45:36+00:00

I try to set different a background colors for left and right columns and

  • 0

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;

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0