setting up height parameters correctly with <div>

[pioneerx01]

I have the following CSS:

 

#ifr_r10 {
overflow:hidden;
padding-bottom:2px;
}
#ifr_c10 {
float:left;
width:250px;
font-weight:bold;
text-align:right;
background-color:#CCCCCC;
padding:5px;
}
#ifr_c11 {
float:left;
width:500px;
padding:5px;
background-color:#FFFFCC;
}

 

and hollowing HTML code:

 

echo "<div ID='ifr_r10'>";
echo "<div ID='ifr_c10'>";
 echo "Title";
echo "</div>";
echo "<div ID='ifr_c11'>";
 echo "$row[title]";
echo "</div>";
echo "</div>";

 

Sorry about the ugly colors in CSS, but they are there to help me see things better The ifr_c10 is always a one line, but sometimes ifr_c11 becomes two lines. However when ifr_c11 is two lines in height, the ifr_c10 remains only one line in height. With use of background colors there is a white gap under ifr_c10 if ifr_c11 is two lines tall.

 

How do I adjust the CSS so the heights of both ifr_c10 and ifr_c11 are identical.

Edited February 17, 2013 by pioneerx01

[Christian F.]

This is a rather old problem, actually, and a solved one.

Just Google for "faux columns css" and you'll find many tutorials on how to work around this problem.