W3C home > Mailing lists > Public > www-style@w3.org > January 2009

Re: Hortizontal filler

From: Giovanni Campagna <scampa.giovanni@gmail.com>
Date: Mon, 12 Jan 2009 13:42:43 +0100
Message-ID: <65307430901120442j41b6e379r244f1586d6881f2d@mail.gmail.com>
To: "Giuseppe Bilotta" <giuseppe.bilotta@gmail.com>, www-style@w3.org
2009/1/12 Giuseppe Bilotta <giuseppe.bilotta@gmail.com>

> Hello all,
> I'm going nuts trying to obtain a purely CSS, no tables, no images
> horizontal filler. A short explanation of my problem: with a
> particular piece of code, we have the following situation:
> [outer box [an inner box]               ]
> where the outer box takes the whole viewport width, and inner box is
> contained in it, starting right after the actual textual content of
> the outer box.
> Now, we would like the outer and inner boxes to be links, which is not
> allowed by HTML, so we need to turn the layout into something like the
> following:
> [[outer box][inner box][filler ]]
> where the outer box is not really outer anymore. [outer box] and
> [filler] will be links (linking to what the outer box would link to),
> so [filler] has to be an actual element, not just empty space.
> Note that this is not a column layout, as the content of the outer box
> might be multi-line, giving
> |[outer box .... with lots of text |
> |...continued] [inner box][filler ] |
> so the column layout solutions that one finds through web searches are
> not adequate. I've repeatedly gone through the CSS specification, but
> I couldn't come up with a solution for this problem. Any suggestions
> appreciated.
> --
> Giuseppe "Oblomov" Bilotta

<a> is not allowed inside an other <a>, but who cares? use XHTML to avoid
dom rearranging and you will have any tag inside any tag. If you want to
disable linking inside inner anchor, just set href="#" or cancel the
activate event using javascript.
That is,

<a href="http://example.com/somewhere" id="outer">Content in the outer box,
before the inner<a href="#" id="inner">Content in the inner box</a>Content

With appropriate style:
#outer {
#inner:link, #inner:visited, #inner:active, #inner:hover {

Received on Monday, 12 January 2009 12:43:18 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:23 UTC