Lists next to floats: how to get list items in the right place?
This script shows the main problem: http://jsfiddle.net/boldewyn/Qvfgv/
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 throughoverflow: 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
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.
source to share
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;
}
source to share
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;
padding-left:0;
margin-left:0;
left: 1em;
}
Update.
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 {
left:1em;
}
source to share