how to inherit parent background to make the child columns appear equal in length

Question

I would like a two column layout without worrying about the background when one column happens to be tallest than the other.

I have read about faux columns, liquid layout, but I would like to ask you if it may work this way: I have a "main" element with a semi-transparent image as background (16x17px). The main element contains the 2 floating columns, the left floats left and the right one floats right.

.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
}
.colleft {
float: left;
width: 618px;
padding:10px 5px 10px 10px;
}
.rightbar {
margin: 0 auto;
width: 50em;
float: right;
padding:10px 5px 10px 10px;
width: 376px;
}
.titolo {
text-align: center;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 30px;
color: #35231e;
line-height: 100%;
padding:10px 0px 0px 0px;
}
.contenuto {
text-align: left;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 25px;
color: #35231e;
line-height: 100%;
padding:20px 0px 0px 0px;
}

There is something wrong in my HTML and I cannot see where. Am I this far from the solution?

<div class="main">
    <div class="colleft">
        <div class="titolo">ARTICLES</div>
        <div class="contenuto">CONTENT</div>
    </div>
    <div class="rightbar">
        <div class="contenuto">RIGHT BAR CONTENT</div>
    </div>
</div>  

I cannot attach a screenshot of the actual situation, unless a moderator gives me his permission...

Any help is truly appreciated, I am at the beginning of a steep learning curve! Silvia

Answer 1

You may use jsfiddle or similar to test it. As well as firebug or similar.

About your question:

When you work with floats, you must contain your floats.

In order to do so, you have several techniques at your disposal. Among them, a simple one:

overflow:hidden; your float container. In your case, the element with class .main.

Try this:

.main {
 width: 1024px;
 background-image: url();
 padding:10px 0px 10px 0px;
 margin: 0 auto;
 background-color: red; //<-- added just to test.
 overflow:hidden; //<-- to contain the floats. 
}

Hope this helps.