Simple DIV tutorial to make websites

Tired of using tables to mock-up your websites? Wondering how to create div’s next to each other, organized like the following:

  • One for the header
  • One for the menu
  • One for content
  • One for your copyright note
  • And maybe more for other purposes?

Wondering how to align images right or left in the content with css? This is your next “should have read” tutorial!


[ad#Adsense]

We are going to make something that looks like the image below. After you’ve made this yourself it’s possible to make anything you would love!

To read this we do except you to have little knowledge about xhtml, css, and webstuff. If you start reading this and nothing makes sense, like what div’s, id’s, css files are, just stop and start with a xhtml and css tutorial first!

Theory

Before the tutorial, some theory, elements you should know!

Float

The basic problem of divs is, that standard they appear one above another. If you wish to use it in a website layout you need to align div’s next to each other. A menu for example needs to be next of the content. If you want to do that you have to use float!

Options are:

  • left
  • right

If you give a div a float:left; tag the next div will appear right of it, if there is place enough on the screen. So it’s important you give that first div a width to!

Magic?

Believe me, no magic is needed, just good use of the float tag, and you’ll get along with making div/css layouts just fine!

The (x)html file!

The divs

Let’s start with the div’s. It’s quite simple! Just copy the next in between the body tags!
[embed_snipt:kpJi]

The Css

Now let’s go to the css file. I’ve created a new file page.css and linked it in the html file.

[embed_snipt:kpJj]

Clear:both??

This simple says: the next div should be below all the previous divs who have a float. So it makes sure it’s below both submenu and content.

Download

Want to download this file? You can get it from this link: http://www.rapidshare.com/files/425602047/DivTutorial.7z.

Questions?

Just ask as a comment and i’ll help you out!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.