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

Question

I have the following code, my div_container div contains left and right divs.
I try my best to make the line contain the same height as the nested left and right divs. What am I missing?
I tried height: auto; does not work.
I need the string to have a solid background color

.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; } 

Answer 1

Add overflow: hidden to your .row_container

Answer 2

The floating div will end with the parent unless you add clear: both to the end of the parent. You can fix this in two ways: you can manually add a clearing div after the parent, for example:

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

Or you can use “clearfix” CSS like this - this is the “modern” preferred way to do this because you are not adding unnecessary HTML to fix the CSS.