Instructables

The very basics of a div-based website

Picture of The very basics of a div-based website
001.png
001.png
001.png
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 adsRemove these ads by Signing Up

Step 1: Create the basic files

Picture of 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.
sysadmn4 years ago
Very well written and complete - thanks for putting in the effort.
ErwtjE (author)  sysadmn4 years ago
Thanks. Glad you like it. :)
JakeTobak4 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 (author)  JakeTobak4 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. :)