Shadow box

HTML code

<body>
<div id="shadow">
 <div id="box">...</div>
</div>
</body>

CSS code

#shadow {
width: 400px;
margin: 2em auto;
padding: 0;
background: #ccc;
text-align: left;
}

/*\*/ * html body #box {
width /*\*/: 400px;
}
/**/

#box {
position: relative;
top: -4px;
left: -4px;
background: #fff;
border: 1px solid #000;
margin: 0;
padding: 0;
}

Comments

In this case, Internet Explorer 5 needs an explicit width for the relatively positioned box through the hack marked in red. This is due to a lack in Internet Explorer's calculation of the correct ratio between a box and its containing block.

Back to the article