0

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 missing?
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;

}
Andrey Rubshtein
  • 20,795
  • 11
  • 69
  • 104
chris
  • 3
  • 1
  • Duplicate of http://stackoverflow.com/questions/2417585/containing-div-not-behaving-correctly-when-child-divs-are-floating – Bobby Jack Aug 23 '10 at 16:25
  • and duplicate of http://stackoverflow.com/questions/2073087/wrapper-question-when-containing-floating-divs – Bobby Jack Aug 23 '10 at 16:25

2 Answers2

3

Add overflow: hidden to your .row_container

Ryan Kinal
  • 17,414
  • 6
  • 46
  • 63
1

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.

casablanca
  • 69,683
  • 7
  • 133
  • 150
  • As you say, the markup method is ugly and discouraged. The clearfix hack, though, is still pretty bad; Ryan's method is the "modern" way :) – Bobby Jack Aug 23 '10 at 16:29
  • Still, though, the `overflow` method only works when you're trying to clear the container. Methods such as the ones mentioned here are still useful if, for instance, you have elements below the elements you want cleared - essentially, creating a 'new row' without a whole new container. – Ryan Kinal Aug 23 '10 at 16:49