100% Width and Padding

Hello,

Site:
http://www.dryleague.com/newDefault.htm
CSS:
http://www.dryleague.com/css/style.css

I'm trying align the date to the bottom-right of my "header" div. The "header" div has a padding of 5px all around. I was able to align the "headerDate" div to the bottom of the container, however, since I couldn't align right, I decided to make it width:100% and text-align:right.

In FF3 & IE7, the "headerDate" div extends past the right edge of it's container by 5px or so. Any ideas why? I figured 100% width would take padding into account. Or perhaps there's an even better method of aligning the date to the right?

IE6 creates a whole different issue where the "logo" div doesn't seem to float properly, pushing the date even farther to the left.

As a side question, does there exist a tool which would allow me to view my page as seen by various browsers (ie. FF3, IE7, IE6, Opera) within one interface?

Thanks,
D.Dubya

re: 100% Width and Padding

Because 'page div header' has a padding of 5px.
No.

re: 100% Width and Padding

So if I wanted 'page div.header' to have a padding of 5px, what's the best way to fix it? Why does it account for padding on the left, but not on the right?

re: 100% Width and Padding

I assume you want the padding to keep the logo off the edge. Just add 'left:0' to the headerDate div.

The reason the padding affects only the one side is because block elements are laid out from top to bottom and left to right. Because it's absolutely positioned, the reference becomes the top and left of its parent div.

re: 100% Width and Padding

You're correct... the padding was solely for the logo. With that in mind, I removed the padding from the 'page div.header' and added it to the logo itself. It looks great now. That said, 'left:0' worked too.

Thanks for all the help. I find it difficult sometimes to visualize what's happening... chalk it up to years of table layouts.

re: 100% Width and Padding

Witch!!! .