List next to left-floating block

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?

On 2007-10-26, Ben C <spamspam (AT) spam (DOT) 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.

In article <5of1a1Fm21stU1 (AT) mid (DOT) individual.net>,
Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) 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

Ben C wrote:

On 2007-10-26, Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) 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.

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.

In article <5of98uFmpei8U1 (AT) mid (DOT) individual.net>,
Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:

Ben C wrote:
On 2007-10-26, Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:
Please take a look at

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

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

dorayme wrote:

In article <5of98uFmpei8U1 (AT) mid (DOT) individual.net>,
Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:

Ben C wrote:
On 2007-10-26, Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:
Please take a look at

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


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.

On 2007-10-26, Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:

Ben C wrote:
On 2007-10-26, Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) 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.

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.

On 2007-10-26, dorayme <doraymeRidThis (AT) optusnet (DOT) 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.