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
after</a>

With appropriate style:
#outer {
display:block;
width:100%;
}
#inner:link, #inner:visited, #inner:active, #inner:hover {
color:black;
text-decoration:none;
}

Giovanni
Received on Monday, 12 January 2009 12:43:18 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:15 GMT