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

--------------------------------------------------
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.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Sunday, 21 March 2010 18:33:43 UTC