In IE7 I'd like to add some margin to a element that has 100% width of it's parent. But the element overflows it's parent. Somewhat logical, but what's a solution to this problem?
I added a simplified example, where the yellow div overflows it's green parent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div style="width: 500px; height: 200px; background-color: green;">
<div style="width: 100%; height: 100%; margin: 10px ; background-color: yellow;">
Test
</div>
</div>
</body>
</html>
Thanks.