Stylesheets - List next to left-floating block

Author

List next to left-floating block

Harlan Messinger

2007-10-26, 6:19 pm

Please take a look at

http://www.gavelcade.com/list_next_to_float.html

How can I style a list so that if it appears next to a left-floated box
as the first list does in this example, the list items, with their
bullets, still appear indented relative to the text above and below the
list (i.e., without having the bullets overlapping the float), without
messing up the appearance if the list *doesn't* happen to land next to
the float, as in the case of the second list?

Ben C

2007-10-26, 6:19 pm

On 2007-10-26, Harlan Messinger <hmessinger.removethis@comcast.net> wrote:
> Please take a look at
>
> http://www.gavelcade.com/list_next_to_float.html
>
> How can I style a list so that if it appears next to a left-floated box
> as the first list does in this example, the list items, with their
> bullets, still appear indented relative to the text above and below the
> list (i.e., without having the bullets overlapping the float), without
> messing up the appearance if the list *doesn't* happen to land next to
> the float, as in the case of the second list?

You can bring the whole list, including bullets, neatly to the right of
the float with:

{
overflow: hidden; /* to start new block formatting context */
margin-left: 0;
padding-left: 40px;
}

on the <ul>, which won't do any harm if it isn't to the right of a
float.

Firefox uses padding on <ul>/<ol> anyway, many other browsers use margin
(margin is suggested in CSS 2.1 Appendix D). You need padding for this
to work since overflow: hidden brings the left _border_ edge of the
<ul>'s principal block box to the right of the float, not its left
margin edge.

To see how this works put a big fat border on the <ul> and see where its
left edge is. It should be right over to the left underneath the float
(set opacity:0.2 on the float to see through it). Bullets are positioned
relative to that left edge (although some browsers make a half-hearted
effort to bring them right a bit). Overflow: hidden brings the left edge
right of the float, so everything can work properly, provided you use
padding not margin to leave space for the bullets.

If the list continues past the bottom of the float, the bullets will
stay lined up one underneath another. If you want them to start flowing
over to the left at that point then you have a real problem...

I could have sworn Firefox non-standardly moved the <ul> block box to
the right of floats even when it wasn't a BFC root, but the last time I
tested this was on an older version of Firefox, so it may be they've
fixed that.

Ben C

2007-10-26, 6:19 pm

On 2007-10-26, Ben C <spamspam@spam.eggs> wrote:
[...]
> Firefox uses padding on <ul>/<ol> anyway, many other browsers use margin
> (margin is suggested in CSS 2.1 Appendix D). You need padding for this
> to work since overflow: hidden brings the left _border_ edge of the
><ul>'s principal block box to the right of the float, not its left
> margin edge.

I just checked the spec on this, actually the left _margin_ edge is
supposed to be brought right of the float, and that is what Firefox
does. But not Opera.

The spec says:

The margin box of a table, a block-level replaced element, or an
^^^^^^^^^^
element in the normal flow that establishes a new block formatting
context [p. 126] (such as an element with 'overflow' other than
'visible') must not overlap any floats in the same block formatting
context as the element itself. If necessary, implementations should
clear the said element by placing it below any preceding floats, but
may place it adjacent to such floats if there is sufficient space.

Earlier it says:

In a block formatting context, each box's left outer edge touches
the left edge of the containing block (for right-to-left formatting,
right edges touch). This is true even in the presence of floats
(although a box's line boxes may shrink due to the floats), unless
the box establishes a new block formatting context (in which case
the box itself /may/ become narrower due to the floats).

Their italics. I should have pointed out that all this is only what
/may/ happen... but I've not seen a browser that automatically
clears new BFCs which is the permitted alternative.

dorayme

2007-10-26, 6:19 pm

In article <5of1a1Fm21stU1@mid.individual.net>,
Harlan Messinger <hmessinger.removethis@comcast.net> wrote:

> Please take a look at
>
> http://www.gavelcade.com/list_next_to_float.html
>
> How can I style a list so that if it appears next to a left-floated box
> as the first list does in this example, the list items, with their
> bullets, still appear indented relative to the text above and below the
> list (i.e., without having the bullets overlapping the float), without
> messing up the appearance if the list *doesn't* happen to land next to
> the float, as in the case of the second list?

Consider either list-style: none and/or zero margins and paddings
for the UL remotely near the float. Odd things happen otherwise
on some browsers.

If you want bullets, consider 'made' bullets within the li,
either via img or char:

<li>€ List item 1</li>
<li>€ List item 2</li>

Using Option 8 for the dot on a Mac produces very nice results,
that look pretty consistent with your list further down which has
real html bullets. There is perhaps something more dependable? Or
an img dot, you can make it scaleable by em dimensioning it.

I would also be inclined to class the ul that is anywhere near
such a float and:

ul.class {list-style: none;}

There is the interesting "problem" of an oddity in appearance
when some list items drop below the float but not all, (add more
li items to see). I find it acceptable but you may want this not
to happen?

--
dorayme

Harlan Messinger

2007-10-26, 10:17 pm

Ben C wrote:
> On 2007-10-26, Harlan Messinger <hmessinger.removethis@comcast.net> wrote:
>
> You can bring the whole list, including bullets, neatly to the right of
> the float with:
>
> {
> overflow: hidden; /* to start new block formatting context */
> margin-left: 0;
> padding-left: 40px;
> }
>
> on the <ul>, which won't do any harm if it isn't to the right of a
> float.

Thanks so much for this. I understand the caveat about the list being
only partially next to the float! Answer: good only for short lists.

I gotta go back and read what overflow: hidden really means. It's more
involved than I had expected.

dorayme

2007-10-26, 10:18 pm

In article <5of98uFmpei8U1@mid.individual.net>,
Harlan Messinger <hmessinger.removethis@comcast.net> wrote:
[color=darkred]
> Ben C wrote:

The most curious thing, although there are different renderings
across different browsers, especially in regard to the bullets,
in Safari alone, the styles are off. There is no blue float.
Safari alone is not tolerant to your missing closing curly
bracket on the styles in the head.

--
dorayme

Harlan Messinger

2007-10-26, 10:18 pm

dorayme wrote:
> In article <5of98uFmpei8U1@mid.individual.net>,
> Harlan Messinger <hmessinger.removethis@comcast.net> wrote:
>
>
> The most curious thing, although there are different renderings
> across different browsers, especially in regard to the bullets,
> in Safari alone, the styles are off. There is no blue float.
> Safari alone is not tolerant to your missing closing curly
> bracket on the styles in the head.
>
Yes, I found that and closed it on my local version before I posted the
note you're responding to! I forgot to upload it though--just did.

Ben C

2007-10-27, 6:16 am

On 2007-10-26, Harlan Messinger <hmessinger.removethis@comcast.net> wrote:
> Ben C wrote:
>
> Thanks so much for this. I understand the caveat about the list being
> only partially next to the float! Answer: good only for short lists.

Yes for longer lists you need something like what dorayme suggested.

> I gotta go back and read what overflow: hidden really means. It's more
> involved than I had expected.

The unexpected effects of overflow: hidden come about because it causes
a box to become a "block formatting context". So the thing to read about
is "block formatting context". Then you will find where it says they
mustn't overlap floats and may become narrower because of them. I posted
a couple of paragraphs from the spec about this yesterday.

Ben C

2007-10-27, 6:16 am

On 2007-10-26, dorayme <doraymeRidThis@optusnet.com.au> wrote:
[...]
><li>€ List item 1</li>
><li>€ List item 2</li>
>
> Using Option 8 for the dot on a Mac produces very nice results,
> that look pretty consistent with your list further down which has
> real html bullets. There is perhaps something more dependable?

I don't know what Option 8 gives you, but you can use U+2022 for a
normal bullet.