Example:
Code: Select all
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Blah</title></head>
<body>
<div style="border: 1px solid #000; padding: 20px; margin: 20px; background-color: green;">
<p style="margin: 0px; padding: 0px;">Outer DIV</p>
<span style="float: left; border: 1px solid #000; padding: 0px; margin: 0px; background-color: red;">
Inner DIV<br />
Inner DIV<br />
Inner DIV<br />
Inner DIV<br />
Inner DIV<br />
Inner DIV<br />
Inner DIV<br />
Inner DIV<br />
Inner DIV
</span>
</div>
</body>
</html>
Basically I want the outer DIV's height to change depending on what the inner elements height is; I don't want the inner element to spill out of the outer one. I've tried numerous position attributes on both the said elements with no luck.
I hope I won't have to use JavaScript for this, and I'm sure one of you guys knows how to change the CSS to get this how I want!
Thanks.