I am trying to understand floats better. I do not understand this issue. I have had it occur in a few cases but this is my most recent. I am making a two-column unordered list but have some issues with vertical spacing.
<ul>
<li width="50%"> a bunch of text</li>
<li width="50%"> a very large amount of text</li>
<li width="50%"> a small amount of text that does not line up with the first li</li>
</ul>
See code snippet for a proper demonstration.
.lists ul{
width:500px;
}
li{
width: 40%;
float:left;
padding-left:5%;
padding-right: 5%;
}
<div class="lists">
<ul>
<li> <a href="#">harpoons sticking in near his starb</a></li>
<li><a href="#"> aaalewent milling and milling round so, that my boat's crew could only trim dish, by sitting all thing and milling round so, that my boat's crew could only trim dish, by sitting all theiwent milling and milling round so, that my boat's crew could only trim dish, by sitting all thei, with a milky-white head and </a></li>
<li><a href="#"> five whales, and my boat fastened to one of them; a regular circus horse he was, too, that r sterns on the outer gunwale. </a></li>
<li><a href="#"> harpoons sticking in near his starb went milling and milling round so, that my boat's crew could only trim dish, by sitting all thei </a></li>
<li><a href="#"> m the bottom went milling and milling round so, that my boat's crew could only trim dish, by sitting all theiwent milling and milling round so, that my boat's crew could only trim dish, by sitting all theiof </a></li>
<li><a href="#"> harpoons sticking in near his starb </a></li>
</ul>
</div>
See Question&Answers more detail:os