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

Solution 1:

Add overflow: hidden to your .row_container

Solution 2:

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:

<divclass="row_container"><divclass="left_row"></div><divclass="right_row"></div><divstyle="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.