CODEWITHSUNDEEP
csscss-float
grmdgs
grmdgs

Reputation: 585

Vertical space created from float

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>

I would like to remove the vertical gap between the first and second item in the first column, although I don't understand why it exists.

I need to support IE 8 and make an effort for IE7.

Upvotes: 2

Views: 2657

Answers (3)

Deepti
Deepti

Reputation: 46

You can use jquery to align them properly.

Hope this may help- http://masonry.desandro.com/

It also works in IE.

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

A nice way of producing two columns in one <ul> tag is this

DEMO http://jsfiddle.net/kevinPHPkevin/NChgL/1/

div#multiColumn {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

I discovered this some time ago and have been using it ever since.

EDITED

Another solution is to float one <li> left and the other one right and so forth (but does not support IE8 and earlier)

DEMO http://jsfiddle.net/kevinPHPkevin/NChgL/3/

li:nth-child(odd) {
    float: right;
}
li:nth-child(even) {
    float: left;
}

But you could assign a class to each <li>. One for the left and one for the right and it would have the same effect as above.

Upvotes: 5

ntgCleaner
ntgCleaner

Reputation: 5985

It took me a while to understand floats as well, but with a recent project I really got a grasp of them.

If you notice in your fiddle, your #1 and #2 are floated correctly. The #3 li is then floated to the left in the next available space. Unfortunately, floats do not allow elements (like #3 li) to be placed in that available space. It does not allow for 'back fill'. You see, your #2 element is taller than your #1, so it creates that small gap that you are seeing. The next available position for your #3 element to go is under your first element, but that space is technically taken, so it pushes it down.

You can do a two column layout by making two lists and not floating any of it, just styling the uls to be the right width.

Or you can float every other div to the right

Upvotes: 2

Related Questions