PDA

Click to See Complete Forum and Search --> : Header DIV doesn't expand to fill space

upand_at_them
10-10-2007, 07:46 PM
Ugh. DIV are block-level elements, but I don't understand why this doesn't render nicely in IE. I expect the pageHeader DIV to expand to the full width of the container DIV, which is forced wider by the red-bordered DIV. And setting width to 100% shortens it, for some odd reason.

Hints?...Help?

Here's what it looks like in IE: 9715

<html>
<body>

<style type="text/css">
.pageBorder {
border:1px solid blue;
width:650px;
padding:10px;
}
.pageHeader {
font-weight:bold;
background-color:#DDEEFF;
margin:-5px;
margin-bottom:10px;
padding:3px;
}
</style>

<div class="pageBorder">
<div class="pageHeader">Title</div>

<div style="border:1px solid green">blah</div>

<div style="border:1px solid red;width:700px">blah</div>

</div>

</body>
</html>

Thanks,
Mike
ray326
10-10-2007, 10:25 PM
I expect the pageHeader DIV to expand to the full width of the container DIV, which is forced wider by the red-bordered DIV.Then basically your observation and expectation are wrong. The pageHeader is full width (to the padding of pageBorder) and the red-bordered div can't "push" an absolutely sized container so it overflows.
upand_at_them
10-11-2007, 06:34 AM
But the absolutely-sized container (pageBorder) has been forced larger by the red DIV, which doesn't overflow. So why shouldn't the green DIV stretch too?

Any way I can get this without using "min-width"?

Mike
WebJoel
10-11-2007, 07:55 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>

<style type="text/css">
.pageBorder {
border:1px solid blue;
width:650px;
padding:10px;
}
.pageHeader {
font-weight:bold;
background-color:#DDEEFF;
margin:-5px;
margin-bottom:10px;
padding:3px;
}
</style>

<div class="pageBorder">
<div class="pageHeader">Title</div>

<div style="border:1px solid green;width:auto">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi.
Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc.
Aliquam non felis non diam aliquam gravida. Phasellus quis sem.
Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut,
aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.</p>
</div>

<div style="border:1px solid red;width:auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi.
Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc.
Aliquam non felis non diam aliquam gravida. Phasellus quis sem.
Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut,
aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.</p>
</div>

</div>

</body> ?? IE incorrectly expands a container (650px) to accomodate a contained-element (width:700px). Making the 'contained' element's width "auto" maximizes it. -Is this what you mean? 'Two wrongs do a right make'... just because an invalid action (child ("700px") is wider than parent ("650px"), causing parent to 'expand') is not going to affect a sibling ('other child of a parent'). This would be wrong also (surprised that IE didn't find reasoning why this should be normal behaviour.).