Lists next to floats: how to get list items in the right place?

This script shows the main problem:

There is a floating item and next to it is a list in the main thread. List items expand into float space.

The workaround is to use overflow: hidden

on <ul>

. But then the list no longer "flows" around the div, but stays to the right all the time, which is undesirable for all the space below the floated element.

What I am looking for:

  • The list must float around the floating box, and the list items must remain outside the floating box's area. Altrnatively it is okay if individual elements <li>

    need to be shifted to the right (eg through overflow: hidden


  • Pure CSS solution with no background images or JavaScript. This is for the print preview page, which should also be responsive for people without JavaScript and up to IE7.

  • The list letters should be highlighted on the left, just like the default browser. This means that the list items next to the floating item must get extra space to accommodate the bullet.

What does not work:

  • using background images i could specify individual list items and it will be set. But this is not reliable enough because the print of the page needs to be printed.

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


  • I've experimented a bit with combos text-indent

    , list-style-position

    and so, but couldn't find a useful solution.

It is possible that there is no CSS-only solution for this. This question is literally my last resort before informing the client that this is not possible.


source to share

4 answers

Is this what you are after?

I just increased the margin-right

block from 10px

to 30px



I think I have the effect you want, but it might be too hacky for your needs - jsFiddle



List items often seem to sit further to the left than they should. The answer is simple: add a left margin in <li>

yours or a left padding to yours <ul>

. This will shift everything to the right.

I usually see this behavior on sites that use CSS reset because it ul,li {margin:0;padding:0}

will give the behavior you see. Actually your fiddle does this:

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

li {
  margin: 0;
  padding: 0;


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



position: relative;

is the best solution I've found, just add padding or 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;




I agree with TomWardrop that the best solution I have found to ensure that nested list padding is consistent when next to a floating element or not is to reset the padding and use relative positioning with the left setting.

ul {
  position: relative;
  left: 1em;


See the script.


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

ul ul {


see violin



All Articles