For a while now, I've been pondering over a fundamental design question. Visualize this code snippet:
<div style='background:#ccc;'>
<ul>
<li style='display:block; float:left; width:50%;'> item 1 </li>
<li style='display:block; float:left; width:50%;'> item 2 </li>
<li style='display:block; float:left; width:50%;'> item 3 </li>
<li style='display:block; float:left; width:50%;'> item 4 </li>
<li style='display:block; float:left; width:50%;'> item 5 </li>
<li style='display:block; float:left; width:50%;'> item 6 </li>
</ul>
</div>
If I don't apply "float: left" to the parent <div>, the <ul> element will exceed its boundaries.
(Just to clarify, I never use inline styles like this in real projects, it's purely for illustrative purposes).
Typically, I solve this issue by setting an explicit height on the container... but this approach seems messy in today's mobile-centric world and requires numerous media queries to handle different screen sizes. What is the optimal way to achieve automatic height for a container with floating elements?