tags:

views:

34

answers:

3
Q: 

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"&gt;
<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;

}
A: 

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>
BalusC  2010-05-22 14:17:59
A: 

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.

jeroen  2010-05-22 14:18:43
In my case the left column is always higher then the right one.
verror  2010-05-22 14:38:15
but why it's a problem if right column is higher?
verror  2010-05-22 14:43:47
Because your `.mainBar` will finish before the right column so the white background will not go all the way down.
jeroen  2010-05-22 14:55:49
Is it possible to fix this issue as well?
verror  2010-05-22 14:59:16
There are pure css solutions like on http://www.ejeliot.com/blog/61. Otherwise it´s tables or javascript.
jeroen  2010-05-22 15:35:38
A:  
.rightBar
{
    width:30%;
    float:left;
    height: 100%;
    background-color: red;
}

also set the height of the parent element "container" to what ever...

Val  2010-05-22 14:21:11

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?