Specifying width as a percent

**Jukka K. Korpela** · Apr 4 '07, 04:55 PM

Re: Specifying width as a percent

Scripsit Taras_96:

Can anyone tell me why the top paragraph block stretches across the
screen (as you would expect), while the bottom div doesn't stretch
across the entire screen?

What bottom div? What are you doing, and why? URL?

That's absurd. How many times can you break a line. You're supposed to use
CSS for vertical spacing.

display: table-cell;

That's pointless in WWW authoring., because IE doesn't support it.

width: 3%"/>

Here you close the div element, by XHTML rules, which you seem to be sort-of
following (why?).

</div>

And here you close it again. Please fix the markup first, validate it, check
your CSS, post the URL telling what you wish to accomplish.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

**Ben C** · Apr 4 '07, 05:15 PM

Re: Specifying width as a percent

On 2007-04-04, Taras_96 <taras.di@gmail .comwrote:

Hi everyone,
>
Can anyone tell me why the top paragraph block stretches across the
screen (as you would expect), while the bottom div doesn't stretch
across the entire screen? When I set the width to 100% (which I
interpret as saying 'make this width the same width as the parent
(which is the entire screen)) the div is made just wide enough to fit
it's contents, and if I decrease the value for the width, the width of
the div stretches?!

First, note that table cells' computed width for a styled auto width is
the shrink-to-fit width, while for block boxes (like the first paragraph
block) the default for auto width is all the available width.

In other words, block boxes like paragraphs fill all the width available
if they're width:auto, but table cells shrink-wrap their contents if
they're width:auto.

Second, if a percentage width is unintelligible, because the containing
block's width depends on its contents, then the browser ignores it, and
treats it as auto.

Third, table cells (in the sense of elements with display: table-cell)
have to be inside table rows (in the sense of elements with display:
table) which have to be inside tables (in the sense of...), and the spec
instructs browsers to supply anonymous table row and table boxes where
required.

Your div is display: table-cell and its parent is body, which is
display: block. So the browser inserts an anonymous table box and an
anonymous table-row box, making your tree of _boxes_[1]:

block box for body
anon table box
anon table row box
table cell box with width 100%

The table cell's containing block is the anonymous table box, whose
width is auto and shrink-to-fit. Your request for 100% (or 3%, whichever
you meant) is therefore ignored, and the cell gets its shrink-to-fit
width.

So if you want your table to take the full width of the viewport, you'll
need to put in two more divs, respectively display: table-row and display:
table, and then set width: 100% on the one that's display: table. At
this point it will be unnecessary also to set width on the display:
table-cell div.

Something like this:

<style type="text/css">
.table { display: table; width: 100%; }
.table-row { display: table-row; }
.table-cell
{
display: table-cell;
background-color: green;
}
</style>
...
<body>
<div class="table">
<div class="table-row">
<div class="table-cell">
Hello
</div>
</div>
</div>
</body>

[1] Note that this is NOT the DOM tree. If you stick a <tdelement
where it doesn't belong, the parser will usually construct <trand
<tableand those will usually appear in the DOM tree. But a div with
display: table-cell will not affect the DOM tree, only the tree of
generated boxes.

><html>
><body>
><br /><br /><br />
><p>out of div</p>
>
><div style = "
background: transparent url('../main/images/header_center.g if')
repeat-x center left;
height: 100px;
display: table-cell;
vertical-align: middle;
width: 3%"/>
><p style="text-align:center">
yeah
></p>
></div>

**Taras_96** · Apr 6 '07, 09:15 AM

Re: Specifying width as a percent

>

What bottom div? What are you doing, and why? URL?

I meant the div at the bottom of the page, sorry.

URL: http://tarasdi.110mb.com/contained_divs_and_widths.html

That's absurd. How many times can you break a line. You're supposed to use
CSS for vertical spacing.

I was doing it as a quick hack.

>
That's pointless in WWW authoring., because IE doesn't support it.
>

I know to avoid it now, thanks.

>
Here you close the div element, by XHTML rules, which you seem to be sort-of
following (why?).
>

sorry, typo

your CSS, post the URL telling what you wish to accomplish.
>

I was trying to get text horizontally centered on the page, and
vertically centered in the div it was contained within. I was doing it
using the display:table-cell (as described here), but this would cause
the div to shrink in size, which resulted in the text no longer being
horizontally centered. I noticed that when I decreased the percentage
associated with the width property, the width would actually increase.
I'm still confused about this behaviour.

I've uploaded the page at http://tarasdi.110mb.com/contained_divs_and_widths.html

**Taras_96** · Apr 6 '07, 09:25 AM

Re: Specifying width as a percent

Excellent post, cleared up a few things for me.

First, note that table cells' computed width for a styled auto width is
the shrink-to-fit width, while for block boxes (like the first paragraph
block) the default for auto width is all the available width.
>

That makes sense, but do you see any reason why when I decrease the
percentage the width increases (if you look at
http://tarasdi.110mb.com/contained_divs_and_widths.html you'll see
that the div is quite wide when the width is set at 3%)?

I've tried to read the w3 specs on calculating widths, but it's pretty
complicated (http://www.w3.org/TR/CSS21/
visudet.html#Co mputing_widths_ and_margins), is there any documents out
there that are a bit clearer/explain this bit of the specs a bit
better?

Jukka has pointed out that IE doesn't suppourt table-cell for the
display, so is there some other way of vertically aligning things
within the containing block?

**Ben C** · Apr 6 '07, 10:15 AM

Re: Specifying width as a percent

On 2007-04-06, Taras_96 <taras.di@gmail .comwrote:

Excellent post, cleared up a few things for me.
>

>First, note that table cells' computed width for a styled auto width is
>the shrink-to-fit width, while for block boxes (like the first paragraph
>block) the default for auto width is all the available width.
>>

>
That makes sense, but do you see any reason why when I decrease the
percentage the width increases (if you look at
http://tarasdi.110mb.com/contained_divs_and_widths.html you'll see
that the div is quite wide when the width is set at 3%)?

Good question. I can't see any justification for that. If you remove the
width: 3% the table-cell div shrinks-to-fit the word "hello" as you
expect. As soon as you put a percentage width on the table-cell div, its
width becomes the whole width of the viewport!

I'm tempted to say it's a bug in Firefox, but Opera and Konqueror both
do the same thing.

I've tried to read the w3 specs on calculating widths, but it's pretty
complicated (http://www.w3.org/TR/CSS21/
visudet.html#Co mputing_widths_ and_margins), is there any documents out
there that are a bit clearer/explain this bit of the specs a bit
better?

Probably. I agree that the spec doesn't explain it very well.

In this case, though, that 3% width is a percentage width of an
auto-width container (the containing block is the anonymous table), and
therefore should be ignored completely. The spec is very clear on this.
But even with a strict doctype on your example (always use the strict
doctype, just start every page with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

)

FF, Konqueror and Opera all compute this huge width. I don't know why.
It seems wrong to me.

Jukka has pointed out that IE doesn't suppourt table-cell for the
display, so is there some other way of vertically aligning things
within the containing block?

None that are entirely satisfactory, but something might be possible
depending on your requirements.

See http://www.student.oulu.fi/~laurirai/www/css/middle/

Specifying width as a percent

Specifying width as a percent

Comment

Comment

Comment

Comment

Comment