Introduction: The Very Basics of a Div-based Website

About: Hi, I'm Ellen, 24, living in Belgium and ever since I was little, I have enjoyed making greeting cards. If you have any questions regarding making greeting cards, feel free to contact me. Happy crafting! -…

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>

Step 7: Make the Site a Little Less Ugly

Now the fun part; colors.

Now that we have the main div structure, we can change the colors to something a little less chaotic/ugly/...

Just play around with the colors in the css file.

Here is the complete html file of the webpage displayed in the image:

<!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>
<div id="container">
<div id="content" class="clearfix">
<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>
<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>
</div>
<div id="header">
Header
</div>
</div>
</body>
</html>

And this is the complete css file:

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

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

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

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

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

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

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

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

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

So now you've got the basics. Of course there's still a lot to edit like colors, font-sizes, a better looking navigation block, ... But this instructables is only about the div structure. If you'd like to see other related instructables, you can always ask. I'll see if I can find the time.