I have a container set to 960px with 20px of padding, and a div set to 100% inside of that. Now, my question is: how can I force the div to take up 100% of the container from edge to edge even though I have set a padding?
I know how to do it, just want to make sure I’m doing it the best way possible.
Though, word of advice – NEVER set padding the same time as a fixed width, too much of a pain in one’s backside. Side-Margin or pad the child elements instead of padding the parent… It’s just less headaches all around.
Especially if you’re still expected to support the page being usable back to 5.5 (doesn’t have to be perfect, just has to be usable) with the ‘broken’ box model.
Yes, I guessed you meant that but I was just making sure 
Interesting. I don’t usually set padding like that for different reasons, just using it as an example.
I’ve totally dropped support for IE5.5 a long time ago… and I’m not looking back. I do understand however, that it should still be usable and it will.
Actually, I don’t have it technically “set” to 100%, I’m letting the parent define the width.
Thanks for the tip about IE7!
You would need to remove the 100% width and let the width be auto and then use negative margins of -20px on each side. For ie7 and under you will also need to add position:relative and zoom:1.0 or the element won’t behave properly.
Thanks for the reply. No it isn’t absolutely positioned. And the way my page is set up, it would be impossible for it to be so.
I was thinking the negative margins would be the best way, just wanted to make sure I wasn’t overlooking something.
If anyone knows of a better way to do this, please chime in.
well, if the div isn’t AP’ed best way I know is to set negative left and right margins.