I am attempting to create two columns with a floated list. Each li element has a different height, and I want to achieve this layout without large spacing gaps.
Here is the closest solution I have reached:
HTML
Please note that I do not have br tags in my actual code. They are only used here to demonstrate varying heights of content.
<ul>
<li><br /><br /><br /></li>
<li><br /><br /></li>
<li><br /><br /><br /><br /></li>
<li><br /></li>
<li><br /><br /><br /></li>
<li><br /><br /></li>
</ul>
CSS
ul { width: 300px; margin: 0 auto; border: 1px solid black; list-style: none; padding: 0; }
ul li { width: 138px; margin: 1px 5px; border: 1px solid #d8d8d8; background-color: blue; float: left;}
ul li:nth-child(2n+1) { float: right; }