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.


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">
<link rel="stylesheet" href="style.css">


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.
<p>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! </p>
<p>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.</p>
Very well written and complete - thanks for putting in the effort.
Thanks. Glad you like it. :)
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 <ul> and then just use some styling to get it to look right.
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. :)

About This Instructable




Bio: 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 ... More »
More by ErwtjE:The very basics of a div-based website Card making basics: cutting and carving a card Simple greeting card n&deg; 4 
Add instructable to: