Sent by Simon Willison on 4 April 2003 19:07
Jeff Shepherd wrote:
> I just cam across a somewhat cool visual formatting. The text is in a
> white box with a black border and behind it is a grey box, narrower and
> taller. It looks kind of like this.
>
> +----------------+
> |................|
> +--------------------+
> | |
> | Blah, blah, yaz |
> | |
> +--------------------+
> |................|
> +----------------+
>
> Of course it was done with tables, but I was thinking this might be done
> quite elegantly with CSS. Can it be done with nested DIVs, the inner
> one having a width wider than the containing one? Of course as I
> experiment the containing DIV expands to accommodate the inner DIV. Or
> does this have to be done with three serial DIVs?
I just had a play and came up with this:
http://development.incutio.com/simon/css-experiments/header-outside-the-box.html
The trick I used is to have an h3 (although it could just as well be
another div) inside a div:
<div class="outer">
blah
<div><h3>header</h3></div>
blah blah
<p>asdsad</p>
</div>
The first inside div is position: relative; allowing the h3 to be
positioned relative to the div using position: absolute; The downside of
this is that the inner div needs to have a height specified, as
otherwise the other content in the main div ends up overlapped by the
header (which has been pulled out of the document flow).
I've tested it in IE6, IE5/Windows, Phoenix and Opera 7 and it works
fine in all of them.
Cheers,
Simon Willison
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/