CODEWITHSUNDEEP
htmlcssformattingcss-float
Crashalot
Crashalot

Reputation: 34513

Float or formatting issue with lists: list item with float style not clearing to left when elements above contain multiple lines

We are seeing a weird float or formatting issue with lists.

We display list elements horizontally, vs the default of vertically, three to one row. Each list element usu only contains one line of text.

However, when the row above an item contains two lines of text, the formatting gets weird and the list items don't all align consistently anymore. For instance, an element that should appear in the first column instead appears in the third column.

To reproduce:

1) Go here: http://www.panabee.com/domain-name-generator/healthy%20food

2) Scroll to the bottom section called Wikipedia Related Terms.

3) PayPal us $1000. Just kidding. :) Look for the text Dusty Donovan. This should clear all floats above and line up in the first column. Instead it's aligned in the third column. This also happens for Boosterthon Fun Run.

How do we remedy this formatting or float issue?

Thanks!

Upvotes: 0

Views: 1279

Answers (4)

Steve Taylor
Steve Taylor

Reputation: 1951

If your markup is dynamically generated, you can do the following. This example is for 4 columns, and uses PHP.

  1. Set a counter, e.g. $i = 0 as you loop through your items (obviously incrementing by one each time).
  2. In the class of each item, set it to col-<?php echo $i % 4; ?>, i.e. $i modulus 4 for the column number.

So you'll get something like:

<ul>
<li class="col-0">Lorem ipsum</li>
<li class="col-1">Lorem ipsum</li>
<li class="col-2">Lorem ipsum</li>
<li class="col-3">Lorem ipsum</li>
<li class="col-0">Lorem ipsum</li>
<li class="col-1">Lorem ipsum</li>
</ul>

(Of course, this can be done easily in manually coded markup, too.)

Then add the following CSS (assuming you've already got the floating and width set up for all li elements):

li.col-0 { clear: both; }

Seems to work well!

Upvotes: 1

kuyabiye
kuyabiye

Reputation: 709

It is an expected behavior, the element before that has 2 lines and distorting the floats. If you don't care about ie6 check out this fiddle http://jsfiddle.net/kuyabiye/9YFzW/

If you care about ie6, the only way seems to set equal heights or using a equal height javascript solution or organizing the markup bundling 3 columns like below

<ul class="clearfix">
<li>col 1</li>
<li>col 2</li>
<li>col 3</li>
</ul>

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27624

Crashalot, it's not a CSS bug it's the way floats work, the taller float means that something on the next 'row' can't float further left than it, what you would be looking for is CSS3 "multi-columns" , which as you've probably guessed is not fully supported yet, there are scripts which help accomplish the same thing, and I believe some browsers do have support

floats were always just a hacky way - it can be done somewhat similarly with inline-blocks instead of floats, you still get "uneven spacing/vertical margins" whenever there's a two line item, but at least there's still an even distribution of items between columns and with the vertical-alignment you can achieve with inline-blocks, the extra spacing can be evenly distributed.

example here: in JSBin

Upvotes: 2

ToddSmithSalter
ToddSmithSalter

Reputation: 715

One thing you could do, is to set an explicit height on the li elements, then force overflow to be visible.

#wiki_terms li {
  float: left;
  width: 170px;
  margin-right: 30px;
  height: 30px;
  overflow: visible;
}

Not the most elegant of solutions, but a workaround if you have no other option.

Upvotes: 0

Related Questions