- A Great Big Hole In The Earth
- Captioning Portfolio Images With GET
- HTML5 Image Captioning With Metadata
Jan 25 2010
One Container, Many Possibilities: Four Layout Options Using a Single div (With A Sprinkling of CSS3)
0 commentsAs 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 XHTML code is as follows:
<h1>Evil, Incorporated</h1><ul id=”nav”><li><a href=”#”>Home</a></li><li><a href=”#”>About Us</a></li><li><a href=”#”>Contact</a></li></ul><h2>We Hate You</h2><dl id=”captioned-image”><dt><img src=”darkman.jpg” style=”width: 240px; 240px;” alt=”Ignatius T. Rowley” title=”Ignatius T. Rowley” /></dt><dd>Our President and Founder, Ignatius T. Rowley</dd></dl><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.</p>
(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-color: #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; }ul#nav { background-color: #a33; margin-top: 0; padding: .5em 0; }ul#nav li { display: inline; }ul#nav li a { text-decoration: none; font-family: "Agenda-Bold", Helvetica, sans-serif; color: #fff; padding: .5em; }dl#captioned-image { float: right; text-align: center; }dl#captioned-image dd { 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. (For my students: duplication of this code for use in assignments or in-class exercises will be frowned upon; in especially egregious cases, copying may lead to charges of plagiarism).
Almost all of the design components shown in the basic page layout are derived from CSS we 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 color.
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 nenefit. There are several issues we might fix, however:
There is an problem with the current design when we resize our browser window. At small sizes – most especially narrow window widths – our design breaks down. While maintaining a goal of fluid design should be a priority, there are limits. We’ll set a min-width on the body itself to limit the point at which this fluidity stops:
html, body { height: 100%; background-color: background-color: #feffee; ; margin: 0; min-width: 40em; }
Obviously, this value will change depending on just how fluid you wish the design to be, and the sizes of the element used in the body.
Another possible issue is the fact that the paragraph text wraps under our captioned image. This is an aesthetic choice – wrapped images make the best use of space on our page, but sometimes the designer might want to emphasise positive space in the layout. If that was the case, we still don’t need a div – we just need to restrict the width of the paragraphs and our captioned image. In a fluid design, that width would be typically expressed as a percentage. It may take a little experimentation to determine the optimal value, especially when testing extremes of browser window widths, so the percentages below are simply suggestions.
dl#captioned-image { float: right; text-align: center; width: 40%; }p { font-family: Baskerville, Times, serif; text-align: justify; margin-left: 5em; margin-right: 2em; width: 45%; }
Note that the widths stated are percentages of the overall width of the container element: in this case, the body. Note also that they must add to 100% or less, especially when margin is added to any element. As always, placing temporary CSS borders on elements is helpful to visualize what is happening in your page.
We’ll talk more about columnar text is a later entry – for now, let’s move on to graphic elements.
While it is not an issue in the design we have, background images can be problematic in fluid designs, as they are fixed in dimension. The solution is not to stretch them to fit, but to make them seamless repeating background tiles.
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:
ul#nav { background-color: #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 center.
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 design fluidity we discussed earlier.
After adding appropriate markup to our code, add this to the CSS:
div#container { margin: 5em; background-color: #feffee; padding-bottom: 1em; }
(You’ll want to modify the background-color for the body to an appropriately dark tone).
Note that our percentage widths for the paragraphs and the definition list remain in effect; it’s just that they are now being measured against the containing element of the div, rather than the body. 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-image: 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.
Further Resources
Another way of generating background stripes is with a resource like Stripe Generator 2.0.
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 CSS3 drop-shadow:
div#container { margin: 0 5em; background-color: #feffee; padding-bottom: 1em; -moz-box-shadow: 12px 0 3px rgba(0, 0, 0, 0.4); }
box-shadow takes the same value sequence as text-shadow, but remains (as of this writing) a draft component of CSS3, and is thus preceded by a browser-specific prefix: -moz for Firefox, -webkit for Safari and Chrome, etc.
- Background image used in the body (zoomed by 1600%)
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; -moz-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
- Background image for the container div (before treatment in PhotoShop)
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. If we’re not using CSS3 (more on this later) that means we have to make the width of the container div the same as the image:
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; }
You must be signed up and logged in to leave a comment. Doing so only takes a moment.
