CSS floating element doesn't wrap

[JHR]

Hey all,

I'm trying to make a sidebar box float to the right of various items,
and for those items to wrap if a user shrinks his browser window.
Instead, in every browser I've tried except for Internet Explorer (in
Safari, Firefox, and other Mozilla-types), the box ends up overlapping
with the second and third rows of the text (which are in an ordered list
with some 'display: table-cell' formats defined in order to allow
specific alignment).

The first row raps correctly, but the subsequent ones overlap with the
text going physically behind the box; in Internet Explorer, all
left-aligned lines wrap in order to make room for the floating sidebar,
which is what I want. The only thing I've been able to do is set a
background color for the sidebar, which prevents the dotted line from
going through it but not the text. I've tried adding a 'clear: left' tag
to no avail.

I'll paste the code below, or you can look at the misbehavior in action at:

http://www.sigga.org/bad-css/index.html

Shrink the window to the left, and you'll see what happens. The top word
doesn't overlap and instead wraps, but the indented line overlaps with
the sidebox, which I really don't want (it should wrap instead).

[yes, I know it's missing the doctype, overall structure, etc., and
doesn't look like much of anything design-wise, this is just an example
pared down from my actual code to show the bad css.]

Any ideas what might be wrong? Incredibly grateful in advance,
JHR

==========
The barebones HTML code, with innards removed, looks like this (same as
at weblink above):

<div class="floating-sidebar">
<ul><li>random items, various formatting</li></ul>
</div>

<p>

<div class="first-line">text</div>
<ul>
<li class="subsequent-lines">
<span class="subsequent-line-part-1">text</span>
<span class="subsequent-line-part-2">text
<span class="subsequent-line-part-3">text
</span></span>
</li></ul>

The relevant (I think) CSS definitions (ie., I'm omitting things that
only relate to fonts, etc. as opposed to placement) are:

.floating-sidebar {
float: right;
padding: 7px;
border: 3px outset lightgray;
margin-right: 20px;
}

/* this next one wraps correctly */

.first-line {
margin-bottom: -10px;
margin-top: 25px;
border-top: 1px dashed #666633;
}

/* these next four, all on the same line but often repeated on several
lines, all fail to wrap around the sidebar */

.subsequent-lines {
display: table;
border-bottom: 1px dotted #666633;
padding: 2px;
padding-top: 4px;
width: 100%;
}

.subsequent-line-part-1 {
display: table-cell;
width: 65px;
}

.subsequent-line-part-2 {
display: table-cell;
}

.subsequent-line-part-3 {
}

[Spartanicus]

JHR <ne********@sigga.org> wrote:

I'm trying to make a sidebar box float to the right of various items,
and for those items to wrap if a user shrinks his browser window.
Instead, in every browser I've tried except for Internet Explorer (in
Safari, Firefox, and other Mozilla-types), the box ends up overlapping
with the second and third rows of the text (which are in an ordered list
with some 'display: table-cell' formats defined in order to allow
specific alignment).
IE doesn't support CSS tables.
http://www.sigga.org/bad-css/index.html

Shrink the window to the left, and you'll see what happens. The top word
doesn't overlap and instead wraps, but the indented line overlaps with
the sidebox, which I really don't want (it should wrap instead).

Your example makes no sense, your description of what you want to happen
doesn't clarify things, if anything it throws up more questions.

Don't post code to the group, validate your HTML and CSS first,
expecting us to correct your errors before we can get to the question
isn't likely to yield a good response.

--
Spartanicus

[Spartanicus]

Spartanicus <[e-mail]> wrote:

http://www.sigga.org/bad-css/index.html

Your example makes no sense, your description of what you want to happen
doesn't clarify things, if anything it throws up more questions.

Upon loading the example in Mozilla it makes some sense, set display to
inline if you want to format the list that way. Google for "ALA Taming
Lists" for a tutorial on how to format lists.

--
Spartanicus

[JHR]

> Don't post code to the group, validate your HTML and CSS first,

expecting us to correct your errors before we can get to the question
Well, that was the problem - the HTML and CSS does validate just fine,
it just produces unexpected behavior in browsers other than Internet
Explorer (which seems the reverse of what should happen, given that IE
doesn't support CSS tables, as you say).

However, changing the code as you suggest in your second message, to
make the display inline instead of table, causes the wrap to work
correctly. Thanks - precisely what I needed!

Spartanicus wrote:
JHR <ne********@sigga.org> wrote:

I'm trying to make a sidebar box float to the right of various items,
and for those items to wrap if a user shrinks his browser window.
Instead, in every browser I've tried except for Internet Explorer (in
Safari, Firefox, and other Mozilla-types), the box ends up overlapping
with the second and third rows of the text (which are in an ordered list
with some 'display: table-cell' formats defined in order to allow
specific alignment).

IE doesn't support CSS tables.

http://www.sigga.org/bad-css/index.html

Shrink the window to the left, and you'll see what happens. The top word
doesn't overlap and instead wraps, but the indented line overlaps with
the sidebox, which I really don't want (it should wrap instead).

Your example makes no sense, your description of what you want to happen
doesn't clarify things, if anything it throws up more questions.

Don't post code to the group, validate your HTML and CSS first,
expecting us to correct your errors before we can get to the question
isn't likely to yield a good response.