Colored boxes – one method of building full CSS layouts

Date: 13 January 2004
Author: Russ Weakley

How do you go about building a full CSS layout? Is there an overall method that can be used for any layout?

This article explains one method of building a full CSS layout from start to finish. The method, based on positioning colored boxes and testing across a range of browsers, can be used to build a wide range of full-CSS layouts.

Introduction

We will start with a basic graphic mockup and convert it into a working (x)html page. The aim is not to focus on this particular example, but the overall process used.

Some guidelines before starting:

Build one step at a time and test each step across a range of browsers

It is quite easy to start building a layout and come to a problem half way through. To avoid this, try building your layout in small steps and test each step across a range of browsers. This means you can see exactly how the layout is progressing and there is no need for backtracking if you run into problems.

Build for modern browsers then work backwards

It is better to start by building for standards-compliant browsers and then do work-arounds such as hiding (via @import) for older browsers.

Validate your HTML code and CSS

Validate your HTML and CSS frequently. Many layouts problems can be fixed with a quick validation check.

Step 1. Decide on a level of browser support

Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them. To help you decide, talk to clients and sample users as well as examining existing log files if they are available.

Levels of support

Full CSS support – the browser is served all CSS rules and should display the layout in a reasonably accurate manor. If you intend to provide full support to older browsers, you may need to use very basic CSS and avoid complex CSS positioning.

Partial CSS support – certain CSS rules are hidden from a particular browser. This generally means that the browser may not display the layout accurately, but it will still display some degree of the overall presentation. For example, this could mean that the fonts and colors are rendered correctly but certain aspects of positioning are not.

Unstyled content means you hide all styles from a particular browser.

Browser support options
Modern Browsers Modern Browsers Recent Browsers Older Browsers
Option 1. Full CSS support Full CSS support Full CSS support
Option 2. Full CSS support Full CSS support Partial CSS support
Option 3. Full CSS support Full CSS support Unstyled content
Option 4. Full CSS support Partial CSS support Unstyled content

For this example, we will use option 2.

Step 2. Look for containers

To position elements on the page, the overall containers need to be established. Look at your design (which could be in the form of a digital mockup, a sketch on paper or an existing site/template) and work out the main containers on the page.

Step 3. Name the containers

These containers will become the main <div> elements that will hold your content, so you should give them names that have semantic meaning rather than names that describe their appearance. For this example the main containers will be called:

  • container
  • header
  • mainnav
  • menu
  • contents
  • footer

If the containers are unique to a page, use IDs rather than classes. This may be important when styling other elements on the page. If conflicts occur, rules that use IDs will override rules that use classes.

Step 4. Creating the mark-up

Start with a Doctype – in this case we will use HTML 4.10 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

Next, add the document head information, including Character encoding and a link to a stylesheet called “styles.css”:

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Page title</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>

Finally, we add the body information – including empty <div> elements to reflect the containers we decided on above. For example:

<body>
<div id="container">
	<div id="header" title="sitename">
		<div id="skipmenu"><a href="#content">Skip to content</a></div>
		<h1>
			Sitename
		</h1>
	</div>
	<div id="mainnav">
		<ul>
			<li><a href="#">Section 1</a></li>
			<li><a href="#">Section 2</a></li>
			<li><a href="#">Section 3</a></li>
			<li><a href="#">Section 4</a></li>
		</ul>
	</div>
	<div id="menu">
		<h3>
			Archives
		</h3>
		<ul>
			<li><a href="#">December 2003</a></li>
			<li><a href="#">November 2003</a></li>
			<li><a href="#">October 2003</a></li>
			<li><a href="#">September 2003</a></li>
			<li><a href="#">August 2003</a></li>
		</ul>
		<h3>
			Last 10 Entries
		</h3>
		<ul>
			<li><a href="#">Entry 120 (4)</a></li>
			<li><a href="#">Entry 119 (0)</a></li>
			<li><a href="#">Entry 118 (9)</a></li>
			<li><a href="#">Entry 117 (3)</a></li>
		</ul>
 	</div>
	<div id="contents">
		<div class="blogentry">
			<h2>
				<a href="#" title="Permanent link to this item">Heading here</a>
			</h2>
			<h3>
				Wednesday, 3 December 2003
			</h3>
			<p>
				<img class="imagefloat" src="flower.jpg" alt="" width="100" height="100">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Duis autem vel eum</a> iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			</p>
			<ul>
				<li><a href="#">Comments (4)</a></li>
				<li><a href="#">Pingbacks (1)</a></li>
				<li>Category: <a href="#" title="Category">CSS</a></li>
			</ul>
		</div>
	</div>
	<div id="footer">
		Copyright © Sitename 2004
	</div>
</div>
</body>
</html>

Step 6. Positioning the overall containers

These main containers must now be styled with a positioning method. To do this, we will add a series of CSS rules into the styles.css file. When we are happy with the overall position of containers, we will come back and add more detailed CSS into the file.

body
{
	margin: 0;
	padding: 0;
	background: #ddd;
}

#container
{
	margin: 1em auto;
	width: 650px;
	background: #fff;
}

#header { background: #CF3; }
#mainnav { background: #9F3; }

#menu
{
	float: right;
	width: 165px;
	background: #6F9;
}

#contents
{
	float: left;
	width: 440px;
	background: #9FC;
	margin: 0 0 0 20px;
}

#footer
{
	clear: both;
	background: #FF9;
}

Step 7. Any problems?

While this layout works well in most browsers, Internet Explorer 6 shows a worrying issue.

The left margin on the content container is too wide. This is caused by an IE6 double margin float bug and can be resolved by setting the #content with “display: inline”.

#contents
{
	float: left;
	width: 440px;
	background: #9FC;
	margin: 0 0 0 20px;
	display: inline;
}

As this declaration is only needed for IE6, it is best moved to a separate style sheet just for this browser. This new style sheet can be placed inside a conditional comment so that only the relevant browser sees these styles.

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Page title</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
	<!--[if IE 6]>
	<link rel="stylesheet" href="ie6.css" type="text/css" media="screen">
	<![endif]-->
</head>

Step 8. Detailed styling

When the containers have been positioned correctly and render correctly across all target browsers we can begin more detailed styling.

/* ------------------------------
global styles
------------------------------ */

body
{
	margin: 0;
	padding: 0;
	font: 85% arial, hevetica, sans-serif;
	text-align: center;
	color: #333;
	background: #ddd url(img_39.gif) repeat 0 0;
}

a:link { color: #B52C07; }
a:visited { color: #b93411; }
a:focus { color: #000; }
a:hover { color: #7d8206; }
a:active { color: red; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }

h2
{
	color: #B52C07;
	font: 140% georgia, times, "times new roman", serif;
}

h2 a { text-decoration: none; }

h3
{
	color: #7d8206;
	font: 110% georgia, times, "times new roman", serif;
}

/* ------------------------------
container styles
------------------------------ */

#container
{
	margin: 1em auto;
	width: 650px;
	text-align: left;
	background: #fff;
	border: 1px solid #676767;
}

/* ------------------------------
header styles
------------------------------ */

#header
{
	height: 45px;
	width: 100%;
	position: relative;
	background: url(header.jpg) no-repeat 0 0;
	border-bottom: 1px solid #fff;
}

#header h1
{
	position: absolute;
	left: -500em;
}

#skipmenu
{
	position: absolute;
	left: 0;
	top: 5px;
	width: 645px;
	text-align: right;
}

#skipmenu a
{
	color: #555;
	text-decoration: none;
}

/* ------------------------------
mainnav styles
------------------------------ */

#mainnav
{
	background: #9FA41D;
	color: #272900;
	padding: 2px 0;
	margin-bottom: 22px;
}

#mainnav ul
{
	margin: 0 0 0 20px;
	padding: 0;
	list-style-type: none;
	border-left: 1px solid #C4C769;
}

#mainnav li
{
	display: inline;
	padding: 0 10px;
	border-right: 1px solid #C4C769;
}

#mainnav li a
{
	text-decoration: none;
	color: #272900;
}

#mainnav li a:hover
{
	text-decoration: none;
	color: #fff;
	background-color: #272900;
}

/* ------------------------------
menu styles
------------------------------ */

#menu
{
	float: right;
	width: 165px;
	border-left: 1px solid #C5C877;
	padding-left: 15px;
}

#menu ul
{
	margin: 1em 0;
	padding: 0;
}

#menu ul li
{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}

/* ------------------------------
contents styles
------------------------------ */

#contents
{
	float: left;
	width: 430px;
	margin: 0 0 0 20px;
}

#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px solid #C5C877; }

.blogentry ul
{
	text-align: right;
	margin: 1em 0;
	padding: 0;
	font-size: 95%;
}

.blogentry li
{
	list-style-type: none;
	display: inline;
	margin: 0;
	padding: 0 0 0 7px;
}

.imagefloat
{
	float: right;
	padding: 2px;
	border: 1px solid #9FA41D;
	margin: 0 0 10px 10px;
}

/* ------------------------------
footer styles
------------------------------ */

#footer
{
	clear: both;
	color: #272900;
	text-align: right;
	font-size: 90%;
	background: #9FA41D;
	padding: 5px;
}

Step 9. Print CSS

Finally, we need to prepare the layout for printing. If you want to faithfully reproduce the on-screen layout, you could change the links to your external style sheets so that they can be accessed by printers. There are many ways to do this including media="all" and media="screen, print".

If you want to give the user a print-friendly page you can do the following.

1. Duplicate your main css file (styles.css) and keep the backup copy. We will now work in styles.css and convert it to a print style sheet. As far as the browser is concerned, it is still a screen style sheet. This means we can work on the file and preview it in a range of browsers without having to go to print preview at every step.

When we are finished, we simply change the name of the file to “print.css”, and put a new link in the head of the document pointing to this file.

2. Look at the layout and decide what is necessary for the print version.

3. For this example, we will remove the header graphic, mainnav and right menu, as well as removing all colors and underline links.

  • Hide any containers you don’t need using display: none;
  • Change all colors to black or grayscale colors.
  • Change links using a { text decoration: none;}
  • Remove font sizing and allow the default font-sizing to be used.
body
{
	margin: 0;
	padding: 0;
	font: 100% arial, hevetica, sans-serif;
	color: #000;
	background-color: #fff;
}

a
{
	color: #000;
	text-decoration: none;
}

#header { border-bottom: 1px solid #999; }
#header h1 { color: #000; }
#mainnav, #menu, .imagefloat, #skipmenu { display: none; }

#menu ul
{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	line-height: 165%;
}

#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px solid #999; }

.blogentry ul
{
	list-style-type: none;
	text-align: right;
	margin: 1em 0;
	padding: 0;
	font-size: 95%;
}

.blogentry li
{
	display: inline;
	padding: 0 0 0 7px;
}

#footer
{
	clear: both;
	color: #000;
	text-align: right;
	padding: 5px;
	font-size: 90%;
	border-top: 1px solid #999;
	margin-top: 2em;
}

4. Change the file name and bring back the duplicated version. Then, add a new link in the head of your document:

<link rel="stylesheet" href="print.css" media="print">

Colored boxes – Finished!

We now have one HTML file that:

  • renders correctly in modern browsers
  • renders reasonably well in recent browsers (small bug in Win/IE5)
  • renders acceptably in old browsers (there is some style and all content is accessible)
  • renders a different layout for printers

This article is also avaialable in:

Comments so far

  1. imran says:

    Fantastic tutorial for newbies. Very, very, very useful for new beginners.

  2. Russ says:

    Thanks for the feedback, Imran :)

  3. Assekops says:

    Thanks. This was helpful for me and I hope it will help others too.

  4. Russ says:

    @Assekops – thank you.

  5. John says:

    Awesomely clear instructions. Thanks so much.

  6. Paullo Cezar says:

    Muito bom, agora entendo um pouco mais os codigos CSS sem dificuldades. Proveitosa aula.

  7. Russ says:

    @Paullo: Obrigado para seu comentário

  8. Sandy says:

    As a newbie to CSS I found this very helpful. One thing; however, I copied and pasted the code into my editor and could not get the page to show with the styles. I found that your link code for the CSS page is wrong.

  9. Peter says:

    Really a very well run website on CSS. I prefer to write everything down and then enter everything in to the pages manually. I’m using Dreamweaver and notepad. Now all I need do is go into Photoshop and make the graphics.

    Do find it helps to name my closing divs with comments (!–header close–) etc.

    Keep up the good work. Peter

  10. Areen shah says:

    haha!!! thats why I love English people. They always share their knowledge for free…. Nice tutorial. Good job, Sangat (mean friend in Balushi language)

  11. Adam says:

    Great tutorial.

    I’ve been googling CSS and page building for a few nights now. This is the best tutorial I’ve come across so far.

  12. jon says:

    I have seen a lot of web tutorials, but I have to say yours is the best. Your going a great job. Finally someone that knows their @#$%. Thank you so much.

    A new friend

  13. Pete says:

    Yep, Very concise. It’s hard to find this sort of info on the thought process. Thank you!!

  14. Peter Shearer says:

    thanks again. Nice tutorial.

    sorry to be picky but was unable to display the sitename because of the H1 style “left: -500em;”. works fine with 500em;

    cheers

  15. Russ says:

    @peter: This design is based on hiding the heading and using a background image to display the site name.

    However, you do not need to use this method at all. If you want, you can leave the site name in place and avoid using the ‘left: -500em” all together.

  16. Bruno Santana says:

    Nossa muito obrigado! se essa aula fosse cobrada, ainda seria pouco!!!

    Muito obrigado mesmo!

  17. [...] the different types of website layouts using CSS & divs was MaxDesign.  In particular the colored boxes – method of building full CSS layouts helped me see how the sites can be created by sections. Possibly related posts: (automatically [...]

  18. Riddhi says:

    Realy nice one….
    And its help me a lot
    Thank you…

  19. mukhemodhu says:

    I am really grateful to you. I was searching and searching and eventually I have found your wonderful site.
    Thanks and Regards
    Mukhe Modhu

  20. Wais says:

    Thanks…. for all the support you gave it to me as been part of new in a world of designer people’s.
    Please,why not trying also one for javascript.
    I hop you got in mind to start one soon.
    bye.

  21. [...] Max Design är bättre på att förklara hur man använder färger [...]

  22. Rene says:

    Nice work @Russ,
    I was just searching for (how do I use) background images with css in the navigation. I found the answer in your css and then I read the tutorial – good stuff – thx

  23. Elvis says:

    This Tutorial is awesome…
    i didn’t understand how div works,, but now i have mastered it through this tutorial.

    Well Done.!!

    Cheers,
    Elvis

  24. Tania says:

    awesome, thanks! AS computing just got a whole pile easier!

  25. yuen says:

    absolutely useful tutorial. Good article!!!

  26. Steve says:

    Thank you for writing this up in such detail. This will be useful for my next design project.

  27. pardall says:

    Great tutorial, I was wondering if we can find somewhere in some of these pre-formated CSS for a complete site, where it already has boxes for text with corners and colors, etc. Here is an example of a simple but good looking boxed content diagram site. http://softoem-buy.ru/

    If you can send me an email referencing a link, I would appreciate.

    Regards.

  28. Cool article with easy to understand instructions. I have been trying to understand how to build CSS layouts and get away from using tables. This helps me a lot. I will use this for a furniture website design project. Thank you.

  29. GREAT! Very Usefull! Keep it up!

  30. Futons says:

    Well done! The tutorial is laid out so a newbie can even understand it. Thanks for providing this great information.

  31. CPCMAN says:

    I’ve been studing web design for several weeks now. Layouts have been my biggest chalenge so far. Your tutorial has brought quite a bit of light to me. Hope to see motre tutorials from yu. Thanks.

  32. stephen says:

    Russ, you published it six yrs ago…. but i still benifit from this tuto… thnk u very much

  33. Salah says:

    Thanks very much for these information