I have some HTML+CSS code that wants to layout several DIVs. The layout is like this: all DIVs stay in a parent DIV whose size is fixed. Then each child DIV should stay on its own line, and use the minimum height for drawing its content. The last DIV should consume all remaining height, so that the parent DIV is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
<!--
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last DIV overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last DIV to use the height of the parent minus the sum of height of the other DIVs.
Thanks.