Re: positioning and sizing an element relatively to any other element

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:44 UTC

On Sun, Mar 21, 2010 at 11:33 AM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> --------------------------------------------------
> From: "Tab Atkins Jr." <jackalmage@gmail.com>
> Sent: Sunday, March 21, 2010 8:41 AM
> To: "Aryeh Gregor" <Simetrical+w3c@gmail.com>
> Cc: "Daniel Glazman" <daniel.glazman@disruptive-innovations.com>;
> <www-style@w3.org>
> Subject: Re: positioning and sizing an element relatively to any other
> element
>
>> On Sat, Mar 20, 2010 at 6:52 PM, Aryeh Gregor <Simetrical+w3c@gmail.com>
>> wrote:
>>>
>>> On Fri, Mar 19, 2010 at 7:12 PM, Tab Atkins Jr. <jackalmage@gmail.com>
>>> wrote:
>>>>
>>>> Example: an element with significant text content and a floating
>>>> child, where you want the child to stretch the whole height of the
>>>> element.  The height is determined by the text content, as there is
>>>> more of it than what is in the floated box.  You can't do this right
>>>> now.
>>>>
>>>> Another example: several elements using Table Layout to link their
>>>> heights together.  You want some children of the elements to stretch
>>>> to the full height of the display:table-cell containers.
>>>
>>> I still don't quite get it.  Could you provide some sample HTML and
>>> point to exactly which box is taller/shorter than you want it to be?
>>> Maybe I'm just being dense.
>>
>> Sure.  For the first one, concerning floats:
>>
>> <!DOCTYPE html>
>> <title>Test</title>
>> <style>
>> div, div * {
>> border: 2px solid black;
>> padding: 2px;
>> background: white;
>> color: black;
>> }
>>
>> div { width: 200px; }
>>
>> span { width: 100px; }
>> </style>
>> <div>
>> <span style=float:left;border-color:green;>
>> I want to be as tall as my parent's box.
>> </span>
>> <p style=border-color:red;>foo bar foo bar foo bar foo bar foo bar
>> foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo
>> bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
>> foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo
>> bar foo bar foo bar foo bar foo bar foo bar </p>
>> </div>
>>
>
> Tab, am I correct in my understanding that you want actually this:
>
> div {   flow: horizontal; /* children replaced in a row */  }
> div > * {   height: 1*; /* flex height - these elements span the whole row
> */  }
> div > span { width: 100px; }
> div > div
>  {
>    width: 1*; /* flex width - this element takes the rest width left in
> container.
>                         This declaration is optional as width:auto is width:
> 1* in fact. */
>  }
>
> Floats by the nature of their computation cannot have flexes in any form so
> with them
> that layout is not achievable in any flex model.

Yes, that would work.

~TJ