Creating a CSS layout from scratch

5. The major elements

We need to add 5 divs, all with individual id’s that describe their purpose. These divs will correspond to the major areas of the design we identified in Step 2. Replace the Hello World. text with the div’s below. Just for now we’ll also put text inside the divs for easy visual identification when we view the page.

<div id="page-container">

	<div id="main-nav">Main Nav</div>
	
	<div id="header">Header</div>
	
	<div id="sidebar-a">Sidebar A</div>
	
	<div id="content">Content</div>
	
	<div id="footer">Footer</div>

</div>

Your page should now look something like this:

Without CSS, the divs will be arranged from top to bottom, one under the other, in the same order as they are in the code. This is usually refered to as the ‘flow’ of the document.

So lets use the information we have to make our divs the correct size.

Remove the red background from the #page-container, and add a new rule for #main-nav. Set the background of the main nav to red so we can see it, and set its height to 50px:

#page-container {
	width: 760px;
	margin: auto;
}

#main-nav {
	background: red;
	height: 50px;
}

Notice we didn’t specify the width of the div. This is because by default, a div will stretch to fill its parent container, which in this case, is our #page-container div that was set to 760px wide.

Do the same thing for the header div, using the height we got in step one. Make this one blue.

#header {
	background: blue;
	height: 150px;
}

While we’re at it, lets do the footer. The footer can be orange.

Remember when writing your stylesheet, that you should group your styles together. So all the header styles would go together. All the footer styles would be together, and all the navigation styles would be together. Also I find it helps to structure them in a similar order to the HTML, so header near the top, footer near the bottom.

#footer {
	background: orange;
	height: 66px;
}

Now the next 2 divs are slightly different. The heights are dependant on the content that’s inside them, so we wont set a height. Lets make them darkgreen, and green. Put the rules inbetween the header and the footer rules in the css. This makes them easier to find once the stylesheet gets larger.

#header {
	background: blue;
	height: 150px;
}

#sidebar-a {
	background: darkgreen;
}

#content {
	background: green;
}

#footer {
	background: orange;
	height: 66px;
}

If all has gone well, you should have a page that looks like this:

« Previous 1 2 3 4 5 6 7 8 9 10 11 12 Next »

102 Comments

Chris says:

Hey Steve - old article or not this is a nice & simple explanation of how ‘float’ works. I’ve always battled to get my head around those ... cheers!
Arizona Web Design says:

Thanks so much for sharing all the information, I wasn’t hoping to find such complete tutorials for free. It may be an old article but the basic principles of website building and web design have remained the same.
Jason says:

I just finished this tutorial, and although it was not current, it was very helpful. I have published my completed example (with a link to this page)at http://bit.ly/d9IEIb for anyone to check out. I will post links to the menu images and css file on my blog. Thank you for providing this resource. Can’t wait to see the update.
Casey says:

An amazing teaching source. Never found anything that present the material, and shows it’s simplicity such as this. I feel like I actually understand css now, whereas most any other place that tries to teach makes it far more complicated than it really is.
Steve Dennis says:

Thanks guys :) I really appreciate the kind words. Keep an eye out for more articles in the near future, and feel free to let me know if there’s anything you would like a good tutorial or article written on, that you’re having trouble finding good information on. Do that via the contact section though :) Cheers!
didik edhi says:

It’s very usefull for me as newbie.good site..all the best.
NeoCaster says:

Thanks for teaching me CSS.
I’m about to move to the next page, b4 that i just felt can’t last bit of code for the css be as under? Rather replacing the h2 code u explained earlier. Lemme now if I’m correct. Cheers !!

#content p, h1, h2 {
margin: 0;
padding: 0;
}
Steve Dennis says:

@NeoCaster: I wanted to make sure people were understanding the basic concepts before bringing up things like grouping, but yes, the code you’ve written would be a more elegant solution.

Some people favour using a “CSS Reset” to zero out browser defaults like margins and padding, but I am heavily against that method, as I believe we should be leveraging default browser behaviour if possible.
NeoCaster says:

Aha !! Sorry about that, I’m here on this page (pg 9) now… i see ‘h1’ should be separate. Cheers !!
Preston Racette says:

Thanks so much for sharing all the information
Mike says:

I have a question…I normally use tables to do my layouts, but now I’m using CSS but one thing I can’t quite figure out is how to use percentages correctly. With tables its quite easy, if you want the height the whole browser you use 100% and it’ll stretch whichever cell has a “*” in it. How would you accomplish this with css? I want to color the “sidebar” of this tutorial, but if you just add a background it only colors where the text is. I want it to span all the way from the bottom of the header image, to the footer. Does anyone have any information that could help me out or possibly a link to another article that covers this?
Steve Dennis says:

@Mike: That’s a question I get asked a lot. It requires a bit of a shift in mindset. Height=“100%” doesn’t work how you would expect, coming from a background in Table layouts. If you were trying to use this to achieve a page design where the footer is always at the bottom of the browser, I would steer you away from designing like that, as it offers no benefit for the user, and only serves to complicate your code.

It doesn’t seem like that’s your intention though. It sounds like you just want equal height columns, and adding a height would seem like the logical way to achieve this. Unfortunately it’s not that easy, but there is an excellent article over at A List Apart that covers exactly how to achieve what you want: http://www.alistapart.com/articles/fauxcolumns/
Mike says:

Thanks a lot for the response Steve, I very much appreciate it!
adam says:

thanks a lot for this great tutorial..
easy to understanding ;)
Harjit says:

hey steve, this site tutorial is amazing, it actually proved to be very handy in understanding css and other functions of html. Though I’m getting stuck in one area, say if i create a button on the menus, how do i gett he onmouseover attribute to work? I have tried almost everything and for some reason I can’t get it to work? Can you help me…cheers.
nayon says:

very helpful post..
Clear instruction , After completing your tutorial i get clear idea about css.
thanks..
Erik says:

Thank you for this. I’ve been hitting a wall, trying to grasp layout concepts and your tutorial was invaluable. I’m really looking forward to the updated version. Thanks again, Steve.
Oliver says:

Hiii Steve!
Great job! I know now why my “DIVs” didn’t work. You explain every parameter let us see the result and told us how to correct the bad things.
This way of doing things is more interesting than gave us a lot of code to copy/Paste wihtout a comprehension.

Thanks a lot, I’m waiting for the new one.
Nick says:

Thanks for this tutorial. I learned a lot, and it helped to clear up a lot of confusion about float based layouts. The only criticism I can give is that things got way too complicated at page 11. Everything up to that point was great, but the hacks and the advanced CSS just to do a menu, that stuff went over my head and I thought was not a good progression to the flow of the first 10 pages of your tutorial! Other than that, I found it very useful and look forward to visiting your site again.
Steve Dennis says:

Thanks everyone :) It’s great to still see this tutorial being helpful even 4 years after writing it.

@nick: I agree, it drops you in the deep end, however at the time of writing, LOTS of people were still using javascript based rollovers, and the methods described in the tutorial are far better to learn in the long run. Text based navs are sometimes simpler in terms of CSS, but at the end of the day, too many people were asking me how to do image based navs at the time, so I obliged :)
Martin says:

quite good basic tutorial

www.idcreate.net
php tutorial says:

Nice article. Even if it is old, but it contains useful information.
Andy says:

Great tutorial mate, have been looking for something like this for so long; a guide which actually breaks down each component and shows the effect of each parameter change.

Thanks a lot
Bashar says:

Really looking forward to the updated version. It’s the best CSS layout tutorial I found honestly
Hassan Naqvi says:

This article had been my doorway into the css world. Before this article I was designing websites the old-fashioned way using tables. This article is written in such a way that I still refer to it for inspiration and making my css simple.

Looking forward to the new one. Hope this one will still be available.
Medyum Hoca says:

Really looking forward to the updated version. It’s the best CSS layout tutorial I found honestly
Mike Shved says:

Thanks, dude!
From Ukraine with llove :)
icon creation says:

Many applications pack all their data files into a single file, using internal markers to discern the different types of information contained within. The data files used by games such as Doom and Quake
Arch-Area says:

Without this article, my game would never exist :) Cheers!
Airstream says:

This is amazing. Great teaching source
JayAche says:

Can’t get the navigation-menu to work.

I’m using .png and different sized pictures.
Does this make any difference?
Reviewpsdtohtml says:

HI

Good one. Liked and so added to our blog.
Steve Dennis says:

Thanks for the link :)
sunny says:

Thanx!! a lot Steve for such an easy and understandable tutorial. Specially the float & clear part is very clear and easy to understand.

Looking forward to see more such articles.

Thanx!! Buddy
witek says:

You should add semantic meaning to data in footer, using html5 rel attributes or new tags, or using microformats for this (http://microformats.org/wiki/adr , there is also other example and good simple microformats).
Steve Dennis says:

Woah man, did you just jump straight to page 7? Check the note on page 1 :) 4yr+ old tutorial bud! hehe

I should add those to this site though *blush*...
sunny says:

Hi!! Steve,

I have a problem, when I am publishing my file in Mozilla Firefox, margin: 0px, padding: 0px; for html, body selector is not supporting & it shows the default 8px margin from top. Main nav is also having some problem.

Please help….

Thanx!!

Sunny
web designer india says:

wow good tutorial its very use full
Dusty Rose Graphix says:

This is pretty good!!!! I offer layouts, pro pics, scroll boxes and more and people always ask me how do you make layouts. I could never explain so now I can just send them your link!!!
stendmaster says:

Если бы я все это знал до того, как слизал сайт по шаблону.
afsar khan says:

hi
Good very good tut boss i was looking for the kind of tutorial for finishing the job of my own website www.merehumraaz.com. Keep it on and thank a lot.
nzyme says:

now this is something interesting.its an excellent tutorial !!! keep up the good work. I did mess up at some places, but it was really helpful :)
kumar says:

hi!

i tried your navigation css. But i don’t know how to write div tags in the body section. you only gave the css section. It would have been better if you gave body section code also.
Steve Dennis says:

Hi Kumar, follow the tutorial from the start. All the info you need is in there.
kumar says:

hi steve!

Thanks for responding! i am sorry, i have not seen from the beginning. Really it is nice and helpful. If you don’t mind, give me your mail id. So i will email you if i will need anything about css. Once again thank you!
Chris says:

Awesome tutorial. It’s the first one I actually understood in depth. I noticed that no position attributes were used. I always am getting confused by absolute vs. relative. Why would you use those if you can lay a page out like this? What are the benefits and differences between them? If anyone could answer this I would greatly appreciate it. Maybe even pointing me to another tutorial that is as clear as this one would be extremely helpful.
poolboy says:

This is the best CSS tutorial for beginners I’ve come across. The language is clear and pacing is perfect.
Finally, someone who explains it in plain english rather than unnecessarily complicated code-talk. Thanks, Steve!
ENGLISH34Valerie says:

Houses are quite expensive and not every person is able to buy it. Nevertheless, <a href=“http://bestfinance-blog.com/topics/mortgage-loans”>mortgage loans</a> was invented to help people in such kind of cases.
Pranav says:

Hi Steve! Thanks for this awesome tutorial! I have been running websites (plain html/blogs/forums etc) since 2006 and have tried my luck at many CSS tutorials till now. This was the first time I was able to read and understand it fully… Thanks a lot!!
bee says:

Great tutorial until I got up to page 11! For the life of me I can not get the navigation to work. Ive been throught it a million times but the navigation is not showing up. The click throughs work so I know its there but I cant see anything! Can anyone help?! It would be a shame to give up now when Im so close.
Mark says:

Bee, It sounds like class=“hidden” might still be in use within your html source code. This might explain why you can’t currently see the navigation but the clicks do work.
Steve Dennis says:

Class=“hidden” sets the element to display: none; which would make it non-clickable. If you’re not seeing the nav items, it’s 99% likely a problem with your image. Check your image paths are correct and that the images are all in the right place.
Steve Dennis says:

Shit. I’m surprised anyone’s been able to complete this tutorial at all since I launched the new design. Page 11 is completely screwed in terms of images. Sorry guys I should have checked it in better detail (its hard porting this much content to an entirely new CMS by hand). Fixing now.
Steve Dennis says:

Should be all fixed now guys. Also the example on page 12 now works again. My apologies :)
Bee says:

Thanks Steve! I just overwrote some of my code with yours. Just a couple of things I noticed which is giving me a bit of headache.

Firstly the padding on the side bar doesnt seem to be working anymore?

#sidebar-a .padding {
padding: 25px;

}

I still cant get these clicked images to work. Please see below to see how I am doing it. I have done the ‘services’ class to show you what I did. (Just so you know, all my images are in one folder local to the css)

body.about #header {
height: 150px;
background: #db6d16
url(images/about.jpg);
}
body.services #header {
height: 150px;
background: #db6d16
url(images/services.jpg);
}

Hope you can help! Thanks again.
Praca says:

Great tutorial I was looking for sth like this long time, thanks a lot.
Swift says:

Great tutorial!

Though I would like to point out that the reason so many folks are having trouble with the roll over images is possibly due to the fact that you initially save the files as .GIF’s and link to them…only to link to them as .JPG’s on the last step of page 11.

;)
Steve Dennis says:

I see what you’re saying Swift, but if you have a closer look you’ll see that the last code block on page 11 is referring to the header images (which are jpg’s in a different sub-directory). I think the paragraph of text above it makes this fairly clear if someone is following the tutorial and reading it as they go.

4+ years on, with cross-browser positioning being a lot better than it was, there are much better ways of achieving a similar header effect now with a lot less images.
Swift says:

Doh!

yep…yep…I see what you’re saying. I should have noticed that!

That’s what happens when I let work distract me from playing with stuff ;)

Great job once again! Nice of you to put this up!
uggs sale says:

Bee, It sounds like class=“hidden” might still be in use within your html source code. This might explain why you can’t currently see the navigation but the clicks do work.
Jason W says:

This is by far the best CSS tutorial I have gone through. Thanks so much for this, I know this is an old article but it’s relevant and very useful even today.
iFranzi says:

nice tut.
ud says:

nice very nice tut
hm says:

great tutorial! helped me a lot!!
Derek says:

a great one for a beginner like me who wants to jump into CSS. I like how you color coded everything at first to establish the basic layout. Brilliant.
Nirupam Burman says:

Hi Steve,
Awesome work by you,2 thums up.I always had/has/have problems using css with div..alignment and making sections etc..now i am bit confident..just if you could let us know a lot of generic hacking techniques to overcome browser problems it would be so useful because it adds up value to others experience.
Just like the way you have explained this tutorial it would be just great.
Eagerly,waiting for your reply.
Nirupam Burman says:

Its awesome tutorial..2 THUMS UP.i think i am more confident now with div/css..alignment and positioning was the problem i was facing..anyways,it would be really helpful if you could teach css hacks and some of the generic hacks and best practises.
And also css alignment of div ..to design any type of site..
Marv says:

hi steve just wondering why does the navigation images doesn’t show up? but the header image is ok..what could be the problem?, is it the root folder?
LearnWebsiteDesign.com says:

This is one of the tutorials that first helped me to understand how to create css layouts.

Thanks
Jose
Venky says:

Thanks
Mac-xtian says:

Hey Steve you have save me from the fever i had from two sleepless night battling with CSS, both on online and with text book. All i had was just bits of bits and half baked explanation. Your practical explanation is a treatment to my CSS fever. thanks so much for the work made here so far with step by step approach and explicit explanation. I am in deed a debtor to you. Keep an update of this work you are in fact my CSS Guru, Tutor and Mentor.
Darlton says:

i am an African student residing in african.Because of poverty level here in western Africa, it is very difficult for us to learn anything like web designing and development. I was fortunate to have access for 800hrs as it was a promotion time given to me by an internet service provider.I had the desire to learn web designing and was looking for a place where i can learn css layout.It was like i found Gold. This site is so rich in information that i was able to start designing a site for my church.pls can you help me by using list{li} to design the same type of nav menu you used in you tutorials on css layout.I think i have a good grasp of list ..Thank you once again.
Duco says:

I haven’t followed this tutorial yet, but at the look of it it’s very clear. I’m a webdeveloper from The Netherlands and I’m not yet very familiar with the whole CSS story.
Thanks!!
Vinc says:

You should add some code for the “clicked” state of an image ;-)
#main-nav dt a:active { background-position: 0 -100px; }
Rinat says:

This tutorial is *so* freaking clear to me! The last part with those rollovers was a bit confusing (just need to get some rest) so I gave it up for a while, tho. Thank you so much!
dann_s says:

Hey Steve
Excellent tutorial well done—!. I recently started learning CSS and I have looked many other tutorials I never could understand.(positions attributes) but this way seems much better to do it, however, I have not tried yet just read the tutorial. Brilliant job
Raghav says:

Very meaningful tutorial, thank you for sharing…
tanzeem says:

Excellent tutorial well done
hyp3r says:

when will the new one be finished?
tori says:

Hi very helpful—really is the best one out there by far. Will you be posting the updated version soon? Or maybe just a simple explanation of how we can update it?
vijay says:

Steve can you make a downloadable copy of this useful tutorial for refering in .pdf format?
It would be very helpful.
Thanks for such a wonderful tutorial.
Paul says:

Steve,

Very nice tutorial, learned a lot from it.
When will we see an updated version?

Thanks
Someguy says:

Brilliant tutorial. So far easy to follow.
mikemil@hotmail.com says:

Excellent tutorial - just what I’ve been hoping for.
Alex says:

thank you very much for the tutorial steve all went well til i got to the nav can you please elaborate on the step below or update the nav code with current css?

“Now the problem we have, is that we also want the header image to change based on what section we are viewing. So we need to modify the #header rule like so:

body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
Now when you create pages for your other sections, you’d just change the class on the body from about, to say, contact, set up a css rule pointing to the correct header image, and you’re done.”

thanks again
kiwi92 says:

Hello,

I’m a beginner, and it is very good tut. Thanks a lot!!
Very clear, and it is very easy to understand flow on html page.

Thanks a lot!!
kigiin says:

It’s been 4+ years ... any plans to get something new and up to date posted? What you’ve done was fantastic and I’m waiting on an update to see what other great things you can teach us.
codyy says:

Hey Steve.

Just a quick question, if im not seeing any changes in my webpage, does this mean I wont until im finished, btw i’m using iE.
umy says:

thankyou, this tutorial helping me develop a web page ;)
vis says:

thanks great tutorials.
Moritz says:

Awesome tutorial, am a complete newbie to all things HTML and CSS and even I can understand most of what’s going on. Am currently on p.11 and will definitely use this for the site I’m building.

Thanks!
Moritz
Abraham says:

I want to thank you for helping me understand CSS (with this tutorial) when I first started out about a year and a half ago. This article finally made CSS make sense to me. I had bought the books (a ton of them) and none helped to make sense of it all till I found your tutorial! Thanks again for giving us of your time and know-how. Thank You from Texas USA!
Paul says:

Thank you for sharing. It is a good tutorial.
Real Estate SEO Nut says:

Everyone is absolutely right, this is old but when you have a snag these sections layout the process really well. I’ve bookmarked this as a CSS reference when I want a quick run through to reference. Kudos to the writer too!
Daniel Moses says:

Awesome! Great work. It has really helped me like it has helped many others. I am looking forward for the updated tutorial.
Tucson Web Design says:

Nice tutorial. Just subscribed to the RSS feed - hope to see more like this!
Tiago says:

The best tutorial so far was your website! Was it coded using a tool or (as it seems) written by hand?

Congratulations,

I not even needed to go through the tutorial, your site is a blast!
Justin says:

Great tutorial, very detailed and easy to follow. Thanks for sharing!
niki says:

Thanks a lot. Such a great and well explained tutorial.
niki says:

thanks again, I just have a problem when I modify the header with the body.about class the main picture -with the feet- dissapears. do you have any idea what i’m doing wrong?
Jimmy says:

Fantastic tutorial, best I’ve found so far. Can’t wait to see the updated version. Just getting into HTML and CSS and didn’t realise just how hard it was going to be. Your tutorial is really clear and easy to follow. Excellent!
Peter says:

Excellent tutorial, I am very very thanks….

Commenting is not available in this weblog entry.

Articles & Tutorials

Creating a CSS layout from scratch

5. The major elements

102 Comments