Lists next to floated elements: How to get list items in the right place?

Question

This fiddle shows the basic problem: http://jsfiddle.net/boldewyn/Qvfgv/

There is a floated element and next to it a list in the main flow. The list items extend into the space of the floated element.

A workaround is to use overflow: hidden on the <ul>. But then the list doesn't 'flow' around the div anymore but stays at the right all the time, which is undesired for all the white space below the floated element.

What I'm looking for:

• The list should float around the floated block, and the list items should stay out of the floated block's area. Altrnatively it's ok for single <li> elements to be pushed right (e.g., via overflow: hidden).

• A pure CSS solution without background images or JavaScript. This is for a print preview page, which must additionally be tailored for people w/o JavaScript and down to IE7.

• The list bullets should be exdented on the left, just like the browser's default. That means, list items next to the floated element should gain an extra space to it to place the bullet in it.

What doesn't work:

• using background images I could give the individual list items padding and would be set. But this is not reliable enough, because the page's intent is to be printed.

• I don't know the exact width or height of the floated element. If I did, I could fix the problem with li { margin-left: "floated-element's width" + 20px; }.

• I experimented a bit with combos of text-indent, list-style-position and such, but haven't been able to come up with a useful solution.

It may well be, that there is no CSS-only solution for this. This question is literally my last resort before telling the customer that it's not possible.

Answer 1

I agree with TomWardrop in that the best solution i have found to ensure that nested list indents are consistent when next to a floated element or not is to reset the padding and using relative positioning with a left setting.

ul {
  position: relative;
  padding-left:0;
  margin-left:0;
  left: 1em;
}

See fiddle.

Update.

If you want the inset only on nested lists and to keep the first level inline with paragraph. Set left to 0 for ul css declaration and then:

ul ul {
  left:1em;
}

see fiddle

Answer 2

The position: relative; is the best solution I've found, just be sure to add padding or a margin to the right to compensate for the offset. This works with list-style-position set to inside or outside. You just need to adjust the offset accordingly.

ul {
  position: relative;
  left: 3em;
  margin-right: 3em;
}

Answer 3

Is this what you're after?

I've just increased the margin-right of the block from 10px to 30px.

Edit

I think I've got the effect you want, but it may be a bit too hacky for your needs - jsFiddle

Answer 4

list item bullets often seem to sit further left than they should. The answer is simple: add some left margin to your <li>'s or left padding to your <ul>. That will shift everything to the right.

I typically see this behaviour in sites that use CSS resets because ul,li {margin:0;padding:0} will give the behaviour you're seeing. In fact your fiddle does this:

ul {
  margin: 0;
  padding: 0 0 0 20px;
}

li {
  margin: 0;
  padding: 0;
}

So yeah, you're actually aligning the text with the left edge but not the bullet which goes past the edge (that's some kind of CSS quirk I guess). In your case you have a 20px left padding on ul but that doesn't seem to be enough, try putting it on the li or using margins.