Fluid CSS Box Shadows

Here is an example of a fluid box with shadows. This is accomplished using a series of nested boxes with background images.

You can copy the page html from the textarea below and save it to your local system.

<!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" xml:lang="en" lang="en">

<head>

<title>Fluid Box Shadows</title>

//-->
</script>

/*Box Shadow CSS Copyright 2005 Andrew Kimoto
email: webmaster-at-kimoto.us*/

/*Feel free to use this CSS and HTML, but please leave the above notice intact*/

/*this class is for the container, or outer div*/
.container	{
	position:relative;
	top:0px;
	height:auto;
	width:95%;
	margin: 0 auto 0 auto;
	padding: 0;
}

/*this class is for the box, or middle div*/
.box	{
	position:relative;
	float:left;
	height: 100%;
	width:100%;
	background: #fff url(/images/white_box_v_shadow.jpg) repeat-y top right;
}

/*this class is for the boxcontents, or inner div*/
.boxcontents	{
	font-size: 1em;
	padding: 2em;
	color: #fff;
	font-weight: bold;
	font-family: arial, helvetica, sans-serif;
	background-color: #0f83bc;
}

#main .boxcontents p	{
	color: #fff;
}

/*this class is for the top right shadow*/
.topright	{
	position:relative;
	float:left;
	height: 20px;
	width: 20px;
	margin-left:-20px;
	background:#fff url(/images/white_box_vt_shadow.jpg) no-repeat top left;
}

/*this class is for the bottom left shadow, contained in the bottomshadow div*/
.bottomleft	{
	position:relative;
	float:left;
	height: 100%;
	width: 35px;
	background:#fff url(/images/white_box_hl_shadow.jpg) no-repeat top;

}

/*this class is for the bottom right shadow div, contained in the bottomshadow div*/
.bottomright	{
	position:relative;
	float:right;
	height: 20px;
	width: 20px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background:#fff url(/images/white_box_hr_shadow.jpg) no-repeat top left;
}

/*this class is for the bottomshadow div, contained in the box div*/
.bottomshadow	{
	position:relative;
	clear:left;
	float:left;
	height: 20px;
	width:100%;
	background: #fff url(/images/white_box_h_shadow.jpg) repeat-x top;
	margin-right:0;
	padding-left:0;
}

/*this is the fix for ie 5*/
.boxcontents	{
	margin: 0 20px -20px 0;
	voice-family: "\"}\""; 
    voice-family:inherit;
	margin: 0 20px 0 0;
}
//-->
</style>

</head>

<body>
<h1>Fluid CSS Box Shadows</h1>
<div class="container" style="width:70%;margin-left:10px;margin-top:10px;" >
<div class="box"><div class="boxcontents" >
<p>If you want to use the shadow images that I created, please copy them to your own web space.  Thank you.</p>

</div>			
<div class="bottomshadow">

</body>

</html>