Fluid CSS: float column with overflow
Posted
by Ates Goral
on Stack Overflow
See other posts from Stack Overflow
or by Ates Goral
Published on 2010-04-15T04:53:13Z
Indexed on
2010/04/15
5:03 UTC
Read the original article
Hit count: 531
I'm using a fluid layout in the new theme that I'm working on for my blog. I often blog about code and include <pre>
blocks within the posts. The float: left
column for the content area has a max-width
so that the column stops at a certain maximum width and can also be shrunk:
+----------+ +------+ | text | | text | | | | | | | | | | | | | | | | | | | | | +----------+ +------+ max shrunk
What I want is for the <pre>
elements to be wider than the text column so that I can fit 80-character-wrapped code without horizontal scroll bars. But I want the <pre>
elements to overflow from the content area, without affecting its fluidity:
+----------+ +------+ | text | | text | | | | | +----------+--+ +------+------+ | code | | code | +----------+--+ +------+------+ | | | | +----------+ +------+ max shrunk
But, max-width
stops being fluid once I insert the overhanging <pre>
in there: the width of the column remains at the specified max-width
even when I shrink the browser beyond that width. I've played around with a bare-minimum scenario to reproduce the problem and noticed that doing either of the following brings back the fluidity:
- Remove the
<pre>
(doh...) - Remove the
float: left
The workaround I'm currently using is to insert the <pre>
elements into "breaks" in the post column, so that the widths of the post segments and the <pre>
segments are managed mutually exclusively:
+----------+ +------+ | text | | text | +----------+ +------+ +-------------+ +-------------+ | code | | code | +-------------+ +-------------+ +----------+ +------+ +----------+ +------+ max shrunk
But this forces me to insert additional closing and opening <div>
elements into the post text which I'd rather keep semantically pristine.
Admittedly, I don't have a full grasp of how the box model works with floats with overflowing content, so I don't understand why the combination of float: left
on the container and the <pre>
inside it cripple the max-width
of the container.
I'm observing the same problem on Firefox/Chrome/Safari/Opera. IE6 (the crazy one) seems happy all the time.
This also doesn't seem dependent on quirks/standards mode.
© Stack Overflow or respective owner