Nested floats Options

[Brian Chandler]

Here's a test page of my "blog" (what is a blog, exactly? how do I know if I have one?)...

http://imaginatorium.org/shop/blogtest.php...;y=2013&m=7

Basically there's a column down the right (div bloglist), which is floated, and text fills the left (div blog), as per the following stylesheet:

http://imaginatorium.org/shop/blog.css

However, in this entry I want to include a number of images within the text, floated right again. Unfortunately, of course, I want to make sure they all stay against the right edge, which normally means I would put clear:right on the 2nd and 3rd ones. But this doesn't work, because clear moves them below the right column ("bloglist").

Is there a simple way I can change the right column to be "positioned" (or whatever) so that it behaves exactly as now, but is not "floated"?

Hints appreciated.

[Christian J]

However, in this entry I want to include a number of images within the text, floated right again. Unfortunately, of course, I want to make sure they all stay against the right edge, which normally means I would put clear:right on the 2nd and 3rd ones. But this doesn't work, because clear moves them below the right column ("bloglist").

In general (haven't tested your case) it seems you can do that with "overflow: hidden" on the left container (no idea why it works). A complex example is shown here: http://www.phdcc.com/CSS_ClearingFloats.htm

Is there a simple way I can change the right column to be "positioned" (or whatever) so that it behaves exactly as now, but is not "floated"?

That would cause problems with the footer (and/or header) sections.

Perhaps "display: table-cell" on both the left and right column could work, but IE7 and older don't support it.

[Frederiek]

Here's a test page of my "blog" (what is a blog, exactly? how do I know if I have one?)...

See http://en.wikipedia.org/wiki/Blog

[Brian Chandler]

However, in this entry I want to include a number of images within the text, floated right again. Unfortunately, of course, I want to make sure they all stay against the right edge, which normally means I would put clear:right on the 2nd and 3rd ones. But this doesn't work, because clear moves them below the right column ("bloglist").

In general (haven't tested your case) it seems you can do that with "overflow: hidden" on the left container (no idea why it works). A complex example is shown here: http://www.phdcc.com/CSS_ClearingFloats.htm

Thanks for responses. Hmm. Looks like good ol' CSS hack&kludge. Does _anyone_ know why setting an apparently unrelated property (I don't want any overflow to be hidden) should cause this side effect? I am reluctant to use this sort of trick because it's unreliable (well, to a programming mind it's just disgusting), and could suck me into a never-ending cycle of maintenance. I worked around it by putting alternate images left and right, so the problem should not arise. Thanks for trying anyway.

Is there a simple way I can change the right column to be "positioned" (or whatever) so that it behaves exactly as now, but is not "floated"?

That would cause problems with the footer (and/or header) sections.

Perhaps "display: table-cell" on both the left and right column could work, but IE7 and older don't support it.

AFAIK, "table-cell" is functionally identical to using a table, except for philosophy, with the difference that IE anything supports tables. No?

[Christian J]

Does _anyone_ know why setting an apparently unrelated property (I don't want any overflow to be hidden) should cause this side effect?

According to http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

"The 'clear' property does not consider floats [...] in other block formatting contexts."

So the trick is to create another block formatting context, which can be done in a number of (alas indirect) ways:

"Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' [...] establish new block formatting contexts for their contents."

Of the above alternatives it seems using "float: left", "position: absolute" or "display: inline-block" on your left container also requires an explicit width to work properly (otherwise the left container will be too narrow or too wide, depending on its amount of content). Percent widths might work, say 80% for the main content and 20% for the right column.

I've already mentioned "display: table-cell".

Of the various "overflow" values, finally, "auto" might actually be a safer choice than "hidden", since it's better to get a scrollbar in the case of overflowing content than cutting it off. (Normally the left container content shouldn't overflow, since the left container lacks explicit height and width, but it could happen if a word is longer than the window width. Perhaps a horizontal scrollbar of the left container even looks better than one for the whole window in such cases, you'll have to test.)

AFAIK, "table-cell" is functionally identical to using a table, except for philosophy, with the difference that IE anything supports tables. No?

"table-cell" gives you more flexibility. For example, you could use media queries to show a table layout in wide windows, and a single-column layout in narrow ones. Alas, curently some smartphones have higher resolutions than desktops, which complicates things (see the other thread I linked to the other day).