I am facing a challenge with floats inside two containers. I need the containers to wrap around the floats while maintaining a minimum height of 100% for both of them (container>another container>floats).
I attempted using minimum height, however, it seems that minimum height requires a parent with an exact height, not a minimum one. This approach only worked for the outer container.
Using display:table with 100% height on the containers seems to achieve what I need, ensuring they are at least 100% tall but can stretch if the content is longer.
The issue I am encountering:
Display:table is affecting the width of the containers. I cannot set the width to 100% because I need to later define their width with margins. I want them to behave like typical divs, occupying all available horizontal space.
Is there a solution available for my dilemma?
My code:
<html>
<body>
<div class="enclose2">
<div class="enclose1">
<div class="float">
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
</div>
<div class="float">Float</div>
<div class="float">Float</div>
</div>
</div>
</body>
</html>
My CSS:
.float {
width:100px;
border:solid 1px black;
float:left;
}
.enclose1, .enclose2 {
height:100%;
display:table;
background-color:#ccc;
}
body, html {
width:100%;
height:100%;
}