On 2007-04-04, Taras_96 <ta******@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>
