3 Simple Ways to
Share What You Make

With Instructables you can share what you make with the world — and tap into an ever-growing community of creative experts.

PhotosPhotos

Share one or more photos of a project, recipe, or whatever you've made, quickly and easily.

Get Started

Learn more & Get Tips

Step by StepStep-By-Step

Share your step-by-step photos with text instructions of what you made so others can do it too!

Get Started

Learn more & Get Tips

VideoVideo

Share your how-to video. You'll need your embed code from a video site such as YouTube.

Get Started

Learn more & Get Tips

Print PDF

Favorite

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

Remove these ads by Signing Up

Step 1Create 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.

« Previous Step

Download PDFView All Steps

Next Step »

4 comments

Aug 18, 2009. 5:31 AMsysadmn says:

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

Aug 18, 2009. 6:07 AMErwtjE (author) says:

Thanks. Glad you like it. :)

Aug 17, 2009. 7:43 AMJakeTobak says:

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.

Aug 18, 2009. 12:19 AMErwtjE (author) says:

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. :)