How can I make the same heights for two different elements?

I have the following code, my row_container div's hold the left and right divs.

I'm struggling to get the row containter to have the same height as the nested left and right divs.. what am i missi开发者_高级运维ng?

I tried height:auto; didnt work.

I need the row to have a solid background colour

.row_container{

    margin:auto;
    width:420px;
    background-color:#FFFFFF;

    padding-top:15px;
    padding-bottom:15px;
    clear:both;


}
.left_row{
    float:left;
    width:200px;
    padding:5px;

}
.right_row{
    width:200px;
    float:right;
    text-align:justify;
    padding:5px;

}

Add overflow: hidden to your .row_container

Floated divs will run out of the parent unless you add a clear: both at the end of the parent. You can fix this in 2 ways: you can manually add a clearing div after the parent, like this:

<div class="row_container">
  <div class="left_row"></div>
  <div class="right_row"></div>
  <div style="clear: both"></div>
</div>

Or you can use a "clearfix" CSS, such as this one - this is the "modern" preferred way to do it because you don't add unnecessary HTML code to fix your CSS.