Quick and Easy Div Layouts
Yui • Posted 6:42PM on July 21, 2007 (2 Comments)
My sense is that, for some reason, most people have a tedency to code div layers layouts by using an <img> tag at the begining of the body of the document for the header image, and then using absolute positioning to place the main content area and sidebar(s) in their appropriate locations. This method is flawed in that, in the absence of a stylesheet (as may be the case when viewing the website on an older browser), the header image still shows up, causing the page to look quite ugly (example). This is especially annoying if your header image has a large height. A better solution is to use a div image replacement, as I have done in ain’t afraid to die, featuring Dir en grey. I will use this layout as an example.
Download: Example Files
Feel free to download and edit these files however you like. If you use this code, please leave the credits at the top of stylesheet intact.
Notes:
- In all of the following code, italicized text indicates hacks that allow for cross-browser compatibility, which may be omitted if you’re only dealing with standards-compliant browsers.
- Numbers like /*1*/ in CSS code reference footnotes. They are designed in this way as to not interfere with the CSS code if you copy/paste it into your own document.
- You may want to copy code into a program, like Notepad++, that does syntax highlighting, in order to understand the code more easily.
Choosing a Layout
Because of its simplicity, this coding method is only appropriate for a very specific type of layout. The layout must consist only of a header image and a single tiling background. I’ve often seen it misused on layouts that look like this, in which there is one background that tiles vertically and designates the boundaries of the main and sidebar content areas, as well as a background that tiles both vertically and horizontally that often has some sort of pattern meant to cover the entire page. People often try to make tiling backgrounds that are 1024px or 1280px wide in order that they stretch all the way from one edge of the screen to the other. The problem with this type of approach is that, with the ever increasing screen resolution sizes that are coming out, designers will have to constantly increase the widths of their backgrounds so that these backgrounds continue to cover the entire screen for viewers with larger resolutions.
Basics
Here is the header image I will be using:
Actual sizes of images may have been reduced for faster loading.
In addition, I’ve also cropped a 780px × 6px image named back.jpg, which in this case, is meant to tile only vertically. Note that a horizontally tiling background or a background that repeats in both directions can also be used if the code is modified accordingly.
We’ll start by specifying the body styles:
body {
background: #BCFFDF url('back.jpg') repeat-y top left; /*1*/
margin: 0; /*2*/
padding: 0; /*2*/
}
- background - It’s important to specify a hexcode for the background color of your page, because this is the color that will fill the parts of your page that aren’t covered by your tiling background. You can change repeat-y (tile vertically only) to repeat-x (tile horizontally only) or repeat (tile in both directions), depending on what you want your layout to look like. You can also specify where you would like your layout to begin tiling by changing top to the location of your choice.
- margin: 0; and padding: 0; - This ensures that there will be no margins between the content of the page and the edges of the browser window. It’s important in a design like our example because the top and the left are cut off and are meant to touch the top and left edges of the browser viewport.
In order to replace the header image with a div image replacement, we must define a div, which I will call #header, that has the same dimensions as the image, and that has the image as its background.
#header {
background: url('header.jpg') no-repeat; /*1*/
width: 780px;
height: 424px;
}
- background: no-repeat; - While it doesn’t really matter whether or not you set the background to no-repeat, since the #header div should have the same dimensions as header.jpg. However, I like to do this just in case.
Now, all we need to do is position the main content area and the sidebar using absolute positioning:
#main{
position: absolute;
top: 410px;
left: 20px;
width: 460px;
padding-bottom: 20px; /*1*/
}
#sidebar {
position: absolute;
top: 380px;
left: 500px;
width: 170px;
padding-bottom: 20px; /*1*/
}
- padding-bottom - You’ll want to specify a bottom padding value of about 10px to 20px so that the last line of your content isn’t right up against the bottom of the screen. This extra padding gives a sense of breathing room, and will make your layout look more appealing. In this same vein, try to leave at least 10px between your content and the edges of its container.
This is enough to give you a basic layout, with one main content section, and one sidebar. Here’s the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"></div> <div id="main"> <!-- MAIN CONTENT --> </div> <div id="sidebar"> <!-- SIDEBAR CONTENT --> </div> </body> </html>
Note that as long as the #main and #sidebar divs appear after #header in the source code, they will display on top of #header without the need to specify z-index values. However, if you put #header at the end of the body, it will cover up any part of the #main or #sidebar content that overlaps with it.
Slicing Header Images
I like to splice my header images, especially if they’re particularly large, in order to increase the precieved loading speed for users. I usually slice my headers into 4 to 6 horizontal slices, like this:
Actual sizes of images may have been reduced for faster loading.
It’s best to slice header image horizontally like this, because it makes the images much easier to reassemble.
Now, instead of having a single #header div, we must define 4 separate header divs:
#header01 {
background: url('header_01.jpg') no-repeat;
width: 780px;
height: 156px;
}
#header02 {
background: url('header_02.jpg') no-repeat;
width: 780px;
height: 156px;
}
#header03 {
background: url('header_03.jpg') no-repeat;
width: 780px;
height: 156px;
}
#header04 {
background: url('header_04.jpg') no-repeat;
width: 780px;
height: 156px;
}
Because we’ve sliced them horizontally, and because divs are block-level elements, all we have to change in the HTML is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id=”header01″></div>
<div id=”header02″></div>
<div id=”header03″></div>
<div id=”header04″></div>
<div id=”main”>
<!– MAIN CONTENT –>
</div>
<div id=”sidebar”>
<!– SIDEBAR CONTENT –>
</div>
</body>
</html>
Centered Layouts
A common mistake that beginners make when trying to adapt the above code for a centered layout is that they try to use absolute positioning in the same way as for a left aligned or right aligned layout, by assigning pixel distances from either the left/right and top of the browser window. The problem with this method is that it will only work for the specific screen resolution and browser window size that the author was using when he wrote the code. A better solution is to create a #container div, set to the width of the layout, to wrap around all other layout elements, and then positioning #main and #sidebar with reference to #container. An example of this is seen in Delicate Flower, featuring Phantasmagoria.
#container {
width: 770px;
position: relative; /*1*/
}
- position: relative; - This allows for elements within #container to be absolutely positioned with reference to #container.
We can then just simply center #container and the vertically tiling background, and everything else will come with it:
body {
background: #720101 url('back.jpg') repeat-y top center;
text-align: center;
margin: 0;
padding: 0;
}
#container {
width: 770px;
margin: 0 auto 0 auto;
position: relative;
}
Here’s the modified HTML to go with it:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id=”layout”> <div id=”header01″></div> <div id=”header02″></div> <div id=”header03″></div> <div id=”header04″></div> <div id=”main”> <!– MAIN CONTENT –> </div> <div id=”sidebar”> <!– SIDEBAR CONTENT –> </div> </div> </body> </html>
This code should work for all CSS-compatible browsers, and I’ve presonally tested it in IE6, IE7, Firefox 2, and Opera 9. Please notify me of any compatibility issues, should you find any.
Comments: 2 Comments
Tags: HTML/CSS, Tips and Tricks
« Previous || Next »
Kaytie
Posed 8:58PM on February 6, 2008 (Homepage)
I wanted to thank you for this tutorial. I never knew how to center my layouts, and so I think I am going to use this tutorial to help me with my next layout. Goodness, I need to make a new one, hahaha. Thank you for posting this :)