Bert Bos drop shadows

A little tribute

On August 24, 2001 Bert Bos created the following code:

HTML code

<div class="back">
 <div class="section">
  <h2>Heading</h2>
  ...
 </div>
</div>

CSS code

div.back {
clear: both;
page-break-before: always;
margin: 3em -0.75em 3em 1em;
padding: 1.5em;
}
div.back {background: #567;}

(omissis)

div.section {
background: #fbfbff;
margin: -3em 0 0 -3em;
padding: 1.5em;
border: thin solid #999;
}

The box with class "section" is explicitly offset by setting its top and left margins to negative lengths, so that it creates a drop shadows effect also through the different background colors. This solution works fine on standard compliant browsers (Firefox, Opera, etc.), but not in Internet Explorer. In fact, we have to deal with some typical IE's layout problems, such as:

So we have to try another solution, less ingenious and sharp than Bert's one:

CSS code

div.back {
margin: 3em auto;
background: #567;
color: #000;
padding: 0;
width: 600px;
}


/*\*/ * html div.section {
width /*\*/: 600px;
}
/**/


div.section {
background: #fbfbff;
position: relative;
top: -14px;
left: -14px;
color: #000;
margin: 0;
padding: 0;
border: 2px solid #999;
}

We use the relative positioning to fix the main problem. Notice the hack marked in red, used to give Internet Explorer 5 Win layout. An explicit width for the element with class "back" is required by Internet Explorer.

Back to November 2006