Menu
I want to float my list items into a grid like structure depending on the available width.
Unfortunately my items are of different hight and sometimes the items don't wrap all the way to the left. In the example I made the first item a little higher to show the problem, in reality I have no idea which item will be which height.
How can I make the 2nd row start a little further down, but always on the left side ?
<html>
<head>
<style>
li {display: block; width:200px; height:100px; float:left; border:1px solid;}
</style>
</head>
<body>
<ul>
<li style="height:110px;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
826
Use display: inline-block instead of float: left/right
jsFiddle Demo
Further reading: What’s the Deal With Display: Inline-Block?
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
