How to make a Horizontally Centered Box with Drop Shadows using XHTML/CSS
Guide Overview
The purpose of this guide is to show how a horizontally centered box, with "Drop Shadows" can be achieved utilizing XHTML and CSS. The following example uses no tables, is "fluid" or "liquid", meaning it automatically resizes itself to fit different screen relolutions, and validates according to W3C standards. As is, this model is compatible with all modern browsers.
Instructions
- Open up Notepad or your preferred text editor.
- Copy and Paste the following code into your text editor of choice.
<!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>Horizontally Centered Box With Drop Shadows</title> <style type="text/css"> <!-- body { margin:0; padding:0; background-color: #ddd; text-align: center; } #container { width:75%; margin:100px auto; } .back-div { background-color: #333; padding: 1.5em; margin: 3em 0 3em 5em; } .front-div { text-align:left; background-color: #fff; margin: -3em 0 0 -3em; padding: 1.5em; } --> </style> </head> <body> <div id="container"> <div class="back-div"> <div class="front-div"> <h1>Horizontally Centered box with drop shadows</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p> </div> </div> </div> </body> </html>
- Click File ---> Save as...
In Notepad, change the Save as type to All Files. Give your file a name with the extension .html and save it to the directory of your choice.
- Now, open the new .html file in your browser to see how it looks.
body {
margin:0;
padding:0; /* Set margin and padding for cross browser consistency. */
background-color: #ddd; /* Optional, set as desired. */
text-align: center; /* Needed for IE5/Win */
}
#container {
width: 75%;
margin: 100px auto; /* Right and left margin set to "auto", to center the box horizontally */
}
.back-div {
background-color: #333; /* Set as desired */
padding: 1.5em;
margin: 3em 0 3em 5em; /* top, bottom, and left margins set for drop shadow positioning */
}
.front-div {
text-align: left; /* Needed to counteract IE5/Win alignment problem */
background-color: #fff; /* Set as desired */
margin: -3em 0 0 -3em; /* Needed for positioning front box offset left and top. */
padding: 1.5em; /* Keeps content away from the edge of the box. Set as desired. */
}
- For this to work properly, a margin and padding value must be entered in the body CSS element. This example has a value of "0" for all margins, and "0" for all padding. Both can be set to your needs, but since we are using a #container div to surround the boxes, you may just want to leave these values set to "0".
- For this model to work with Internet Explorer 5 for Windows, the value of text-align: center must be entered in the body CSS element. To get the content of the box aligned back to the left, the value of text-align: left should be added to the .front-div CSS element.
- In the #container CSS element, adjust the width: 75% shown in the example, to suit your needs.
- The .back-div CSS element will provide the "drop shadow" effect using margins to do so. This example uses margin values of 3em for the top, 0 for the right, 3em for the bottom, and 5em for the left respectively. These values can be adjusted as needed, but in order for the boxes to maintain fluidity, variable size units are needed such as em and %. The background-color can be set as desired to give the illusion of the "drop shadow".
- The .front-div CSS Element provides the base positioning and background color for the area in which the main content will be located. The use of negative-margin values offset the front box, from the back box, finishing the "drop shadow" effect. This example has margin values of -3em for the top, 0 for both right and bottom, and -3em for the left. These values can be set as desired, but in order for the boxes to maintain fluidity, variable size units are needed such as em and %. The background-color can be set as desired.
<body>
<div id="container">
<div class="back-div">
<div class="front-div">
<h1>Example of a Header</h1>
<p>Content goes here.</p>
</div>
</div>
</div>
</body>
- It takes three divs to accomplish this correctly. A container div, to take control of the main positioning from the body CSS element, a sub-container (identified by the <div class="back-div"> CSS element), for "drop shadow positioning, and finally the main content container (identified by the <div class="front-div"> CSS element), which all of your desired content will reside.
- This example identifies the the two inner boxes using the class selector, which allows them to be used for the creation of multiple content areas that will also have "drop shadows", inside of the main <div id="container"> div.
Back to top
