List next to left-floating block

Harlan Messinger

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?

Oct 26 '07 #1

dorayme

In article <5o************@mid.individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:

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

Oct 26 '07 #2

Harlan Messinger

Ben C wrote:

On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:

>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.

Oct 26 '07 #3

dorayme

In article <5o************@mid.individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:

Ben C wrote:

On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:

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

Oct 26 '07 #4

Harlan Messinger

dorayme wrote:

In article <5o************@mid.individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:

>Ben C wrote:

>>On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:
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.

Oct 27 '07 #5

Ben C

On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:

Ben C wrote:

>On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:

>>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.

Oct 27 '07 #6

Ben C

On 2007-10-26, dorayme <do************@optusnet.com.auwrote:
[...]

><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.

Oct 27 '07 #7