Preventing stuff from "sliding under" floats

[Jeffrey Goldberg]

I suspect that this is a common problem (and so with a known
solution/work-around), but my attempts to find it have failed.

I have a float (a table of content box) on the left of a page. The
headers within the main material either have distinct background colors
or borders. These borders don't seem to recognize that they are in
material that is wrapped around the float.

I can force specific headers to have sufficiently large left margins,
but since I refuse to design to a specific browser window width, I can't
determine which headers need to have that extra left margin.

-j

--
Jeffrey Goldberg http://www.goldmark.org/jeff/
I rarely read top-posted, over-quoted or HTML posts
My Reply-To address is valid.

[Spartanicus]

Jeffrey Goldberg <no****@goldmark.orgwrote:

>I suspect that this is a common problem (and so with a known
solution/work-around), but my attempts to find it have failed.

I have a float (a table of content box) on the left of a page. The
headers within the main material either have distinct background colors
or borders. These borders don't seem to recognize that they are in
material that is wrapped around the float.

Only inline content is shortened to make room for the presence of a
float, this does not apply to the width of a block level element.

>I can force specific headers to have sufficiently large left margins,
but since I refuse to design to a specific browser window width, I can't
determine which headers need to have that extra left margin.

There is no proper solution for this problem under CSS2.x (assuming that
you want the background and/or right border to extend to the right edge
of its container).

There are a few workarounds that may be acceptable for headers with
solid coloured backgrounds only, but these hacks don't work properly for
headers with a background image or a border.

--
Spartanicus

[Jeffrey Goldberg]

Spartanicus wrote:

There are a few workarounds that may be acceptable for headers with
solid coloured backgrounds only, but these hacks don't work properly for
headers with a background image or a border.

I am just using solid colors. So pointers to those workarounds would be
useful.

-j
--
Jeffrey Goldberg http://www.goldmark.org/jeff/
I rarely read top-posted, over-quoted or HTML posts
My Reply-To address is valid.

[Spartanicus]

Jeffrey Goldberg <no****@goldmark.orgwrote:

>There are a few workarounds that may be acceptable for headers with
solid coloured backgrounds only, but these hacks don't work properly for
headers with a background image or a border.

I am just using solid colors. So pointers to those workarounds would be
useful.

http://homepage.ntlworld.ie/spartani...de_a_float.htm

The hack masks the header backgrounds. Note that margins no longer
collapse as usual and a header background will only be partially masked
if it is positioned around the bottom of the float.

Another way of doing this would be to use borders on the float that
match the background of the content.

--
Spartanicus

[Jeffrey Goldberg]

Spartanicus wrote:

Jeffrey Goldberg <no****@goldmark.orgwrote:

>So pointers to those workarounds would be
useful.

http://homepage.ntlworld.ie/spartani...de_a_float.htm

The hack masks the header backgrounds. Note that margins no longer
collapse as usual and a header background will only be partially masked
if it is positioned around the bottom of the float.

Thanks.

In the example the apparent border around the butterfly is actually part
of the PNG image.

Since I want a thin solid border for my float, I'll have to have an
inner and outer entity. The outer will be the one that floats (and has
the content background color as its own) while the inner one will have
the large left and bottom margins.

Another way of doing this would be to use borders on the float that
match the background of the content.

I would need an inner and outer construct again so I can get my visible
border as well.

Thanks again.

-j

--
Jeffrey Goldberg http://www.goldmark.org/jeff/
I rarely read top-posted, over-quoted or HTML posts
My Reply-To address is valid.

[Spartanicus]

Jeffrey Goldberg <no****@goldmark.orgwrote:

>http://homepage.ntlworld.ie/spartani...de_a_float.htm

The hack masks the header backgrounds. Note that margins no longer
collapse as usual and a header background will only be partially masked
if it is positioned around the bottom of the float.

Thanks.

In the example the apparent border around the butterfly is actually part
of the PNG image.

So? The image in my demo can be given a border with CSS no bother.

>Since I want a thin solid border for my float, I'll have to have an
inner and outer entity. The outer will be the one that floats (and has
the content background color as its own) while the inner one will have
the large left and bottom margins.

You've described the demo, why?

--
Spartanicus

[Jeffrey Goldberg]

Spartanicus wrote:

You've described the demo, why?

Mostly to clarify things for myself. The demo makes use there being an
<imgwithin a <pin the first place. But in cases where we don't have
a given double containment, we have to create it (though <div>).

I realize that this isn't some great insight or generalization, but it
is a tiny generalization of the demo. Maybe for someone like you who
could look at the demo and instantly see how it worked, I was just
stating the obvious. But for me it was useful to restate in my own
words what the crucial "trick" of the workaround was.

-j
--
Jeffrey Goldberg http://www.goldmark.org/jeff/
I rarely read top-posted, over-quoted or HTML posts
My Reply-To address is valid.