RE: Hortizontal filler

Hi Guiseppe,

I believe what you are asking can be achieved through the use of floats although it really depends on what you expect to happen when the viewport is too narrow.

Try the following:

<div>
<a href="#foo" class="outer">outer linked content outer linked content outer linked content outer linked content outer linked content</a>
<a href="#bar" class="inner">inner linked content</a>
<a href="#foo" class="filler">&nbsp;</a>
</div>

    <style>
    .outer, .inner
    {
        float: left;
    }
    .inner
    {
        background-color: lightgreen;
    }
    .filler
    {
        display: block;
        background-color: lightblue;
    }
    </style>


Kindest Regards
Chris


 
BlinkBox Entertainment Ltd - don't just watch |
Chris Miller | Development Engineer | +44 20 7092 8700
 
-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Giuseppe Bilotta
Sent: 12 January 2009 16:40
To: Rijk van Geijtenbeek
Cc: www-style@w3.org
Subject: Re: Hortizontal filler


On Mon, Jan 12, 2009 at 9:24 AM, Rijk van Geijtenbeek <rijk@opera.com> wrote:
> Op Mon, 12 Jan 2009 05:26:09 +0100 schreef Giuseppe Bilotta
> <giuseppe.bilotta@gmail.com>:
>
> 'how to' questions are better suited for how-to lists such as CSS-Discuss
> <http://www.css-discuss.org/>

Oh, thanks for the reference.

This request can easily turn into a feature request for CSS though, I
suspect ;-)

>> 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,
>
> Which indicates that there might be some other semantic structure you can
> use? It makes little sense trying to make avoid tables etc if you don't want
> to add proper semantic or structural markup instead of it. IMHO.

I agree. And the question is: what is the proper structural markup
needed for this particular need, and what are the layout attributes to
give to it? See below my additional comments to your reply for further
explanations on what I've tried and why it didn't work as expected.

>> 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.
>
> What's wrong with using a outer box container?
>
> <div><a href=foo>outer linked content</a><a href=bar>inner</a></div>

Currently we have something like

<a class=outer href=foo>outer linked content <span><a
href=bar>inner</a></span></a>

where a.outer has display:block, so the full width of the viewport
turns into a link. With

<div><a href=foo>outer linked content</a><a href=bar>inner</a></div>

the part of the div to the right of the 'inner' link will not be a
link. So instead I can write something like

<div><a href=foo>outer linked content</a><a href=bar>inner</a><a
href=foo class=filler>[&nbsp; or something like that here?]</a></div>

but the problem is: how to have a.filler occupy all of the remaining
space up to the right margin of the viewport? What do I have to put in
it and what kind of CSS attributes do I have to give it?

-- 
Giuseppe "Oblomov" Bilotta

Received on Monday, 12 January 2009 17:20:07 UTC