Forum Moderators: not2easy
DIV: height: 20 width: 300
DIV: height: auto width: 300
DIV: height: 20 width: 300
so i can enter text or more divs to the middle one and it expands automatically. but now the problem is how to get the bottom div to the right place? it doesn't show properly.
anybody help on this? thx in advance :)
yours
I think you're looking for clear:both.. for example.. from what I understand you want.. the following seems to work well: (colour added for differentiation purposes)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title><style>
#wrapper{width:300px;}
#top{height:20px; clear:both; background-color: #f00;}
#bottom{height:20px; clear:both; background-color: #0f0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<p>this is the top bit this is the top bit this is the top bit this is the top bit</p>
</div>
<p> this is neither the top bit or the bottom bit but the middle bit yadda yadda yaddayadda yadda yaddayadda yadda yadda</p>
<div id="bottom">
<p>This is the bottom bit This is the bottom bit This is the bottom bit This is the bottom bit This is the bottom bit</p>
</div>
</div>
</body>
</html>
fixed it now with fixed :)
