div width

[amiw]

Couple of questions, why does the header div appear to be alot more than 640px? When I ran another test and included a 468x60 image there's alot of space in the div?

Another question is why does the vertical-align not work?


#header {
width: 640px;
height: 92px;
margin: 0 auto;
background: #fff url(/images/Logo.gif) top left no-repeat;
text-align: right;
vertical-align: bottom;
padding-left: 180px;
border:1px solid #CCCCCC;
}

<div id="header">
test
</div>

 

[Vragabond]

The width of the box as it appears is calculated from the border, padding and width (and of course margin, but that is outside the box). That is the way W3 has defined box model. As such, your box is not just 640px wide but rather:

640px (width) + 180px (padding left) + 2px (border left and right) = 822px.

More on box model here:

http://www.w3.org/TR/CSS21/box.html

 

[amiw]

ok that's correct, the reason I overlooked that was simply because the image was top left and there was no padding visible between the image and the border. I hadn't thought that the image would be the background for the padding as well.

How about the other issue of the vertical-align: bottom;?

 

[Vragabond]

Check this thread for issues with vertical-align:

http://tek-tips.com/viewthread.cfm?qid=1108141&page=1