As I’ve mentioned in the past, div is one of the most overused and misapplied tags in the HTML lexicon. Every block tag can take on the qualities of a div, so there is nothing particularly special about the element itself. The div tag works best when it is used for what it was intended for, as a container for multiple elements, and in that role, it is very nearly indispensable. We will look at four popular layout options, three of them holding to the principles of fluid design, all using a single div as a container.
All of these layouts use the same basic markup: all that changes is the CSS. The HTML code is as follows:
<h1>Evil, Incorporated</h1>
<nav>
<a href="#">Home</a></li>
<a href="#">About Us</a></li>
<a href="#">Contact</a></li>
</nav>
<h2>We Hate You</h2>
<figure>
<img src="darkman.jpg" alt="Ignatius T. Rowley">
<figure>Our President and Founder, Ignatius T. Rowley</figure>
</figure>
<p>Let’s just get that right out of the way. We loathe you. Here at Evil Incorporated we pride ourselves on our lack of customer service. Our helpline operates at random times, and we use a 20-sided die to determine which call to answer. Customer interaction is always conducted with maximum amount of surliness. Our location is extremely difficult to find, and the front door is laden with traps, some of them lethal.(Note that I’ve used Loren Ipsum text in a second paragraph to expand the content in the screenshots provided.)
The following CSS remains largely unchanged in all the examples below, and is the base on which everything else is built. You should feel free to use your own images, colors and choice of fonts.
html, body {
height: 100%;
background-color: #feffee;
margin: 0;
}
h1 {
margin: 0;
font-family: Agenda Bold, Gill Sans, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 3em;
padding: .5em 0;
color: #fff;
background: #333;
text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.2);
font-weight: 700;
}
h2 {
font-family: Agenda-Medium, Helvetica, sans-serif;
margin-left: 2em;
}
nav {
background: #a33;
margin-top: 0;
padding: .5em 0;
}
nav a {
text-decoration: none;
color: #fff;
padding: .5em;
font-family: Agenda-Bold, Helvetica, sans-serif;
}
figure {
float: right;
text-align: center;
}
figcaption {
margin: 1em;
font-style: italic;
}
p {
font-family: Baskerville, Times, serif;
text-align: justify;
margin-left: 5em;
margin-right: 2em;
}Please note that the designs that follow are neither unitary nor canonical: they are simply starting points, which you should feel free to embroider upon as your inspiration and creativity takes you. Almost all of the design components shown in the basic page layout are derived from CSS I have discussed previously: a horizontal navigation bar, a captioned image, and float. One new feature is text-shadow on the <h1> element. It’s a simple property with three values: horizontal offset, vertical offset, blur and text-shadow colour.
Fluid design, no div required
Our markup lacks a <div> at this point, but the page displayed is perfectly acceptable. We could add a <div>, but it would be redundant at this point and not yield any benefit.
While it is not an issue in the design we have, background images can be problematic in fluid design. The solution is to either stretch them to fit using CSS, or make the image a seamless repeating background tile.
h1 {
background-image: url(skyline.jpg);
background-position: bottom center;
}At extreme window widths, our navigation may appear completely out of alignment with our main heading. This is easy enough to correct:
nav {
background: #a33;
margin-top: 0;
padding: .5em 0;
text-align: center;
}Again, this is an aesthetic choice, and one made with some caution: habituation will cause most users to look for the main navigation on the left side of a page, not the centre.
Fluid design, even margins on all sides
The easiest <div>-based layout to achieve. Also the most adaptable <div> design in regards to differing screen resolutions and browser window size, and the most adherent to the principles of fluid design.
After adding appropriate markup to our code, add this to the CSS:
div#container {
margin: 5em;
background: #feffee;
padding-bottom: 1em;
}(You’ll want to modify the background for the body to an appropriately dark tone).
We’ve added a little padding on the bottom of the div to make sure that the paragraph text does not push up against it.
Also, min-width is now more appropriately applied to the <div> than to the <body> – in the CSS, remove it from one and apply it to the other.
As you can see, the only purpose our <div> has is to enclose content separately from our body. 
Fluid design, centred, no margin top or bottom
A simple variation on the previous design, better suited to pages with more content that require an “endless scroll” layout. Technically, the only thing to watch out for is margin-top on the h1 element, which in standards compliant browsers will force the top edge down; in our case, we have set margin on the <h1> to 0 from the very beginning.
The default CSS is still in effect; the following is simply added to the existing declarations, replacing properties where appropriate. (Be careful not to duplicate or “double-up” style rules – the more redundant code you have, the harder it is to maintain and change.)
html, body {
background-color: #222;
background: url(background-line.gif);
}I’ve used a transparent non-aliased GIF for the body background-image because it gives me the most flexibility – I can change the background-color for the page to create a different look, and the color will show through the transparent parts of the GIF.
Usually this design assumes that the div presents itself with a little more visual separation from the background. Often, this is accomplished with border-left and border-right on the div. While there’s nothing wrong with that, I decided to enhance this design instead with a drop-shadow:
div#container {
margin: 0 5em;
background-color: #feffee;
padding-bottom: 1em;
box-shadow: 12px 0 3px rgba(0, 0, 0, 0.4);
}box-shadow takes the same value sequence as text-shadow.
However, we want the same treatment on both sides of our “floating div”, to make the drop shadow effect consistent. This presents a problem: box-shadow can only be used once for an element. If we use it twice, the first instance of the property is ignored. Instead, we separate the first and second shadow with commas:
div#container {
margin: 0 5em;
background-color: #feffee;
padding-bottom: 1em;
box-shadow: 12px 0 3px rgba(0, 0, 0, 0.4),
-12px 0 3px rgba(0, 0, 0, 0.4);
}This projects the shadow in the opposite direction. The one remaining issue is that the shadows stop at different points at the bottom of the page, due to that padding-bottom: 1em in the first <div>. Move that code from the style declaration for the #container <div> to #fake-container.
Fixed design, centred, no margin top or bottom
Fluid designs should always be our preference: they give the greatest adaptability to screen size, resolution and user preference. Sometimes, however, a fixed-width design is called for. Usually, this is due to bitmapped content in the layout. It’s almost never a good reason, but it is sometimes necessary. In our case, it’s a background-image we want to add to the container <div>.
We want this background to be used only once in the <div>. We also want to keep its position in relationship to the content – the left sigil remains on the left of the page, the right on the right:
div#container {
width:800px;
background-image: url(whole_background.jpg);
background-repeat: no-repeat;
}While the interior relationship of our design remains in place, there is a problem: our <div> is left-aligned by default. Generally speaking, we want a fixed-width design to be center-aligned to the browser window. The problem is that we will never know the width of the browser. So the easiest way is to always make the left and right margin on the <div> constantly equal:
div#container {
width:800px;
background-image: url(whole_background.jpg);
background-repeat: no-repeat;
margin: 0 auto;
}Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
