The Very Basics of a Div-based Website

by ErwtjE

149K66

Intro: The Very Basics of a Div-based Website

This instructable will show you the very basics of how to build a website with divs. Because tables used for layout are evil! :p

To understand this instructable, you'll need to know basic html and css. If you don't understand something, feel free to ask.

My personal homepage also uses this kind of div structure.
http://www.erwtje.net

Enjoy

STEP 1: Create the Basic Files

First create your html file. We'll add the very basics to it. The css file will be empty for now.

html file now contains:

<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

Save your html file as something.html. You can choose the name yourself. Your css file has to be saved as .css. Make sure you give it the same name as mentioned in the html file. In this case "style.css".

We now have a plain empty html page when previewed in our browser.

STEP 2: Edit the Body Tag for Basic Colors, Fonts, ...

We'll leave the html file as it is, and edit only the css file.

Add the following code to your css file:

body {
background: #444444;
font-family: verdana, arial, sans-serif;
color: #444444;
font-size: 12px;
margin: 0px;
}

With this bit of code we'll define all the properties of the body tag. Since all of the content is in the body tag, these settings will affect the entire page.
The background and font color (color), have been set to a dark grey.
The font family (font-family) has been set to verdana. If the computer used for viewing our website doesn't have the font "verdana", it will display our site in the font "arial". You can add more fonts to the list. The "sans-serif" is the generic type which will be used when no font you provided was available.
The font size (font-size) has been set to 12 pixels. This is an absolute value. If you want to edit other font-sizes (like the headers, paragraphs, menu items, ...) you can use the relative unit "em" in stead of "px". This way, if you want to resize your website, you'll only have to change the body font size.
The margin has been set to 0px for all four sides of the body tag. This is done to make sure the site will stick to the top of the window.

STEP 3: Adding a Container With Header and Content

We'll now add the container. This is simply a centered div that will contain our entire website.
In this container, we'll add two more divs; a content div and a header div.

Our html file will now look like this:

<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="content" class="clearfix">
Content
</div>
<div id="header">
Header
</div>
</div>
</body>
</html>

We'll add the following code to our css file:

div#container {
width: 800px;
margin: 0px auto;
background: #FFFFFF;
padding: 0px;
}

div#content {
width: 800px;
padding-top: 100px;
background: yellow;
}

div#header {
width: 800px;
height: 100px;
background: blue;
position: absolute;
top: 0px;
}

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}

div#container means that we have a div tag with id "container". We'll add some colors and a "margin: 0px auto;" to make sure our container is centered in the page.

We have to give the content a padding-top and the header an absolute value with a "top: 0px" to make sure the header is positioned above the other content.

Don't mind the ugly colors. It's just to make it easier to read the colors and to see the different divs.

We'll need this weird clearfix code to make sure our navigation and content divs (added in the next step) don't fall out of the surrounding div.

STEP 4: Make Two Divs in the Content Div for Navigation and Actual Content

We'll now add two more divs in the content div. One for navigation and one for the actual content.

In between the content-tag; you'll add the new code:

<div id="content" class="clearfix">
<div id="nav">
Navigation
</div>
<div id="maincontent">
Main content
</div>
</div>

We'll add some css code to display the navigation and main content divs;

div#nav {
width: 200px;
float: left;
background: orange;
}

div#maincontent {
width: 600px;
float: right;
background: pink;
}

Note the fact that these two divs are both floating. If we hadn't put the extra clearfix code in the previous step, the divs would float outside of the surrounding div. With the clearfix method, we'll make sure that doesn't happen.

STEP 5: Add Some Extra Divs for Structure in Navigation

We'll now add some extra divs to both the "nav" div to create some kind of structure in our webpage.

Change the following bit of code:

<div id="nav">
<div class="navblock">
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</div>

We'll now ad a piece of code to define how the div "navblock" has to be displayed.
Note that the navblock has a class, not an id. The reason for this is simple; divs with an id are only displayed once (the navigation block, header, footer, ...). Divs with classes can be displayed more than once. Here we'll use a class. Just in case we'll want to add another navigation block later on.

div.navblock {
width: 180px;
margin: 5px auto;
border: 1px solid red;
}

If we want to add another block of navigation, you'll just have to add a new <div class="navblock">...</div> structure.

Your code will now look like this;

<div id="nav">
<div class="navblock">
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
<div class="navblock">
<ul>
<li>Boo</li>
<li>Far</li>
</ul>
</div>
</div>

STEP 6: Add Some Extra Divs for Structure in Main Content

We'll now do the same for the maincontent div.

The code now looks like this:

<div id="maincontent">
<div class="contentblock">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
</div>

Again, we'll add a piece of code to our css file to determine how the div has to be displayed:

div.contentblock {
width: 580px;
margin: 5px auto;
border: 1px solid white;
}

We can now add another block of content by adding another "<div class="contentblock">...</div>" in the maincontent div like this;

<div id="maincontent">
<div class="contentblock">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div class="contentblock">
<p>Nunc cursus, justo eget elementum dictum, ...</p>
</div>
</div>

6 Comments

JulianD26 7 years ago

That was very useful and helped me understand some of the concepts by putting it into practice, thank you for your help. I appreciate it!

TriciaS 9 years ago

Thank you sooo much for this tutorial! My son has a major Web project due tomorrow and this will help him to work through it.

sysadmn 14 years ago

Very well written and complete - thanks for putting in the effort.

ErwtjE 14 years ago

Thanks. Glad you like it. :)

JakeTobak 14 years ago

A couple suggestions: 1. Declare your doctype, sometimes not declaring your doctype or declaring the wrong one will make your code not work exactly how you thought it would and can cause some pretty major headaches. 2. Add a generic font type at the end of your font family in case the computer doesn't have any of the ones you listed (serif or sans-serif) 3. Set the content and header divs' widths to 100%, then if you change the width of your page, you only need to do it on the container and they'll expand automatically. 4. You could just put your header div before your content div instead of using absolute positioning to put it above it. 5. You can set #content to "overflow: auto;" and it'll expand to fit floating content instead of that clearfix you're using. 6. Those divs around the paragraphs seems a little unnecessary, you could just apply to .contentblock class to the paragraphs and get the same effect I believe. Other than that everything is fine. Using an unordered list for navigation is good. Even when I don't want the bullets or want a horizontal navbar, I always use an

and then just use some styling to get it to look right.

ErwtjE 14 years ago

1. I normally do that, but since this tutorial is about the very basics of the div structure, I left it out. But I'll add it just for you. ;) 2. I'll do that as well, thanks. 3. I could do that if I wanted the site to expand. But since this is a fixed width website, I prefer that only the font size changes and not the entire website. 4. The content comes first in the code so that readers and search robots will see the content first, and not the header. 5. I've never heard of that solution, but I'll try it out sometime. 6. The one paragraph was just for an example. I used the divs so that you can give a different layout to one "entry" in the content part. (Like on my website erwtje.net.) Thanks for the comment. :)

Intro: The Very Basics of a Div-based Website

STEP 1: Create the Basic Files

STEP 2: Edit the Body Tag for Basic Colors, Fonts, ...

STEP 3: Adding a Container With Header and Content

STEP 4: Make Two Divs in the Content Div for Navigation and Actual Content

STEP 5: Add Some Extra Divs for Structure in Navigation

STEP 6: Add Some Extra Divs for Structure in Main Content

STEP 7: Make the Site a Little Less Ugly

6 Comments

Autodesk Instructables