Re: Hortizontal filler

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