W3C home > Mailing lists > Public > www-style@w3.org > March 2010

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sun, 21 Mar 2010 08:41:54 -0700
Message-ID: <dd0fbad1003210841r33290db6p343dc14a06e1e6f3@mail.gmail.com>
To: Aryeh Gregor <Simetrical+w3c@gmail.com>
Cc: Daniel Glazman <daniel.glazman@disruptive-innovations.com>, "www-style@w3.org" <www-style@w3.org>
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>


For the second one, concerning children of table-cell elements:

<!DOCTYPE html>
<title>Test</title>
<style>
ul {
	display: table;
}

li {
	display: table-cell;
	border: 2px solid black;
	width: 100px;
}

a {
	border: 2px solid green;
	display: block;
}
</style>
<ul>
	<li><a>I'm a link!</a></li>
	<li><a>I'm a link<br>too!</a></li>
	<li><a>We all want to be as tall as our parent, so our clickable area
fills the space!</a></li>
</ul>


In both of these situations, you don't know the height of the parent
and don't want to assign a definite height, as the other contents have
unpredictable heights.  But you still want some things to be equal to
the height of their parents, but you can't do that currently.

~TJ
Received on Sunday, 21 March 2010 15:42:41 GMT

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