Simple CSS templates

The most frequent question in the #CSS channel I’m in is about how you make a 2 column layout. Most beginners seems to have problems understanding how floats work since they are quite different from tables. So I sat down and made some simple layout templates for you. These layouts will all be made with floats since that’s the easiest way to do things. I could have set out to use absolute positioning but that can get tricky when it comes to placing the footer. Let’s stay with floats.

I’ll recap how a floats work. A float is applied by simply setting float: left or float: right on an element in your CSS-file. The element then gets pushed as far to the left or right as possible and the next element will follow to the right (if floated left) or left (if floated right). The closest HTML comparision is the effect you get when setting align=”left” on an image. In the beginning it helped me to think of floats like that.

There are basically two ways to make 2 column layouts with floats. Either you float all the columns (float-float) or you float all but the last one (float-margin). The former method makes it easier to work with clearing inside of the second columns though, so if you’re going for a complex layout float-float might be better. The latter has the advantage that you don’t have to set a width on the last column. It will fill whatever space is availiable. My favourite is still float-margin though, the automatically expanding second column makes sure the the full width is used no matter what.

For the examples below I will use the HTML I outlined in my previous article about CSS basics.

The float-margin method

Let’s start by looking at some examples:

Ok, so how does this work? The first example: The navigation is floated left which means that the next element will follow to the right of it. This sounds right but we are forgetting one thing, what happens if the navigation is very short? Then the text in the right column will continue below the float, probably not what we wanted. So, to fix this we add a margin-left to our content division. Voilà!

The 3 column example is based on the same idea. Here we start by floating the navigation left, floating the first content block right and finally add margins to the second content block. The last block needs to have both a margin-left and a margin-right to stop the text from continuing below the left and right columns. Makes sense? Take a look at the code and I hope it will.

The float-float method

Another method of doing the same is floating each of the columns left. This means that the columns will show up on the webpage in the same order as you put them in the HTML (that was not the case in the previous example, content1 was to the right and content2 in the middle). Some examples for you:

There isn’t much explaination needed here, only thing different from the float-margin method is that you need to set a width on all your columns. You should easily be able to expand this method to kazillion columns :)

That’s all, be sure to poke around with the different layouts to get a feel of how they work for you. In my next post I will go through some less static layouts, namely elastic and fluid layout. Comments are availiable for questions.

[Update: Added an article on Common questions beginners ask]

53 responses to “Simple CSS templates

  1. Great job! Lots of interesting links, very good design, and I love your comment preview too!

  2. I saw ur comments on stylegala:

    a suggestion: always add the browsers you tested your code for.

    u know: IE 5+, Moz FF 1.x etc

  3. @Thomas: Thanks alot. I’ve only got positive comments so far so I’m hoping my articles really do help people.

    @Velaluke: Good suggestion. I generally code for IE 6, FF 1.5 and Opera 8.5 and test in all those browsers. So that’s what I mean. The layouts to the right work in those browsers too. Thanks for commenting.

  4. How can I view the CSS for the examples ?

    I’m using Konqueror now but usually use Opera (by choice) and FireFox – but have to develop for IE6.

    :
    I use tables generated by a program and separate pages for printing using (between tables) with the body background set to grey – this shows the paging the user will get when printed.
    (div {page-break-after:always} )

    How can I change this to floated columns (cells really)- or should I stay with tables ?

  5. @simon: I’m added a link to the CSS-file on each of the templates.

    I’m not sure I understand your other problem… but you should never use tables for layout, it’s not worth it.

  6. In contrary to some other css-help-pages your tutorials are easily to follow, even for beginners.
    Thanks a lot.

  7. Thank you so much for your tutorials. Thanks to your positioning finally makes sense!

  8. Emil,

    Thanks for putting your ideas out for everyone to see. I really like your clear, straightforward manner of presenting the key ideas. Also – your code formatting is crisp and clean too, making it that much easier to understand and maintain. Do you do this manually (not a big deal for your small sample sites – but can be an issue for larger sites)? If not – can you share with us what editor/development tools you use? Thanks!

  9. @Inge, Sin, Ben: Thanks! Always nice to hear that you like that site.

    @Ben: I have done a couple of larger sites too and CSS is just fine to use there too. On larger sites you might want to a one global, one module specific and even one page specific stylesheet. That makes the site very flexible in design. I use an editor called TopStyle for my CSS editing, it’s availiable as a “Lite version” for free.

  10. Emil,
    Thank you. This is what I have been looking for. Great
    instructions.
    Simon

  11. I am speechless; your 4-step intro to CSS has managed to do what dozens of large ‘expert’ websites couldn’t put together in a simple form for all people to understand. After reading your tutorial I really favour your 2/3 col div-based designs as opposed to using tables. So far I ve been using tables as I couldn’t get my head around using divs. A few last questions; float-float vs float-margin – are there any implications across different screen resolutions? For example there an approximate 45% of users using 1280×1024, 35% -> 1024×768, 10% -> 1600×1200 and 10% -> 800×600. I want my design to accommodate for all, including the extremes 1600x+ as well as the ‘old’ ‘800x’ (I belong in that 10% :-( ). What I want to ensure that the ‘below-the-float’ wont happen across larger resolutions, as well as no scrollbars will appear on 800×600 (I hate scroll bars). Considering all these who is the best method to go with, f-f or f-m? Is it possible to use % (percentages) instead of px while defining margins and widths for each of our divs?

    Sorry for the long comments that considerably stretched this left div:)

    Regards.

  12. It would also be interesting to know how to design this gorgeous link highlighting found at http://www.w3.org/Style/CSS/ . I tried to follow the CSS used for them but failed miserably as I encountered 2-4 CSS files which would take me a day to follow:-( Its amazing though the degree of flexibility and potential when you use CSS instead of other deprecated HTML tags!

  13. @Jason: If you use f-m or f-f does not matter really, they work equally well.

    To accomodate different resultions I usually do like on this site, use a width that is set in the “em” unit. I try to make the dafult size work in 800×600 (I know that’s not true for this site) and then let people with higher resolutions use the text-zoom. Percents works too but then you need to take care to not make your lines too long, that has readability implications.

    The mouseover effect changes color, background-color and border on the link. It’s simply done with:
    a:hover { color: white; background: grey; border: 2px solid red; }

    Thanks for dropping by.

  14. After considerable thought I decided to go for the ‘3 columns using float-margin’ template found on this page. I discovered something rather frustrating; I change the document type from HTML 4.01 to XHTML Strict 1, IE breaks the initial design and simply ignores the “width: 700px;” of the CSS. “Content 2” then occupies the entire remaining sceen area! However it remains fine on my FireFox 1.5. I ve heard people saying before that IE sucks, but until now I didn’t know how much:-( I dont like IE, but at least 70% ++ use IE. Any workaround?

  15. Correction for my previous post: I use HTML-Kit and when I choose document type HTML Strict, it also adds “” at the very top of the document. When I removed that the width is obeyed again by IE! On the other hand, by removing that line, the page doesn’t validate as XHTML Strict anymore…

  16. Hi Emil,
    Another (probably) silly question by me: on the 3column f-m method you use id=header in the body but you haven’t got any declarations for “header” in the CSS – does that mean that it understands what “header” is? What if you want to remove the border from the header i.e. when you want to have an image logo occupying say 780px of width? Also by not using the “” at the begining of the page does it have any implications on XML – the feed maybe? If I include that line, the design you have for f-m 3-col, just breaks in IE… Sorry if my comments were silly; it is just I was still unclear about a few things.

  17. @Jason: There should be no problem switching the page to XHTML Strict, I have tried it myself and it worked fine. As you can read on my cross browser tutorial you can’t have anything before the doctype, it needs to be the first thing in the file. Try reading the error the validator gives you, those often help.

    Adding “header” is just a way for me to give the div some kind of label and make it easy to use from your CSS. You can just set #header { border: none; } if you want to remove the border from the header.

  18. Thank you so much for these clear and instructional pages. I was only saying this afternoon that I can never get my head around css (and I’ve been trying for years) and here I am with your template and tutorial, creating a simple demo page. I have a website with not a skerrick of css but that will soon change. Kudos for your clear help. A few typos, but you’re forgiven in return for teaching me what you have lol…Thanks – from Australia…

  19. Hi,

    can you pleas direct me to a good extensive tutorial on HTML, the new HTMl 4.01 or XHTML so i can learn proper coding? I know a bit already but i would like to have an extensive knowledge in it so I can know as much as possible about coding HTML/XHTML?

    Thank you very much

  20. Overall, good and helpful article. Question regarding modifying tags in the CSS. I want to set the tag to give me a specific width line (size=4) and color. I added the following code:
    HR
    {
    color:#F78400;
    size:4
    }
    to the CSS, and inserted in my HTML file, the color was set properly, but not the size. Is there a way to set the size. Is there a good on-line reference for what properties of tags can be reset in CSS?

  21. I note that in the three column example that you use px for the width of the columns. On my three column site, which is based on a very drastically altered standard blogger template that now bears no resemblance to the original two-column template, I use percentages. I believe, perhaps wrongly, that this means all browsers and sizes of screens will be able to view the pages as I intend. In using percentages, I note that I cannot get the three columns to sum to 100% but something slightly less. I am uncertain why this is the case. If I try for 100% then I end up the third column – i.e. on the right – dropping below the left-hand column.

  22. @Levi: I used pixels for a very simple reason, people know how they work. On most of my pages I use “em” instead but that takes some explaination so I just skipped it in these templates.

    The problem with 100% you mention is often caused by small things like borders. According to CSS the real width of an element is the width you have set plus margins, borders, and paddings. So if you set a width of 100% and a border of 1px your layout may break. There’s also a bug in IEs way of calculating widths that makes IE even worse to work with and the solution to that is to simply use the float-margin method. That way you only need to set the width of one of the columns and it doesn’t really matter exactly how wide the other one is, it at least won’t drop down.

  23. Thank you for the quick comment. Another point on width if it is not too much trouble – I note that where you use 3 or even 4 columns you leave a large part of the page unused, concentrating images and text in the centre 60% or so of the available width. If you look at my pages, you will see that I use 100% of total page width. Is that just a design point?

  24. Emil, Many thanks for putting this info on the web for all to see and use. Your tutorial is very easy to read and understand. I am a beginner to CSS & HTML and have been looking through many books for understanding of how to make columns. I was able to catch on to your examples. Thanks again!
    Carl

  25. @Levi: Sorry for being late to respond, must have missed your message somehow. Fixed vs. fluid layouts is a bit area of discussion, some want full width pages not to “waste space” and some think that the text gets too hard to read with too wide pages. Depends…

    @Carl: Thanks. Good you like it.

  26. hello emil, i was wondering if you know a site that can teach me how to slice a template and code it instead of using just background colours etc.

    thank you

  27. hi, thanks for the tutorial on css, I was following along great until I reached your simple layouts page where you show examples of the floating 234 columns. You only provide examples of the html code, which is clear, but you do not provide the css to show how you are using the float features, as besides float: left, and float: right, you make references to (float-float) and float-margin without showing how to display this properly in the css file. Its one of the common themes I am founding with programming tutorials, they do not follow logical progression with examples, and start making assumptions knowing that there is so much room for error when it comes to programming. If you showed the css that supports your simple layout samples that would make things lot clearer, as what you wrote does not make any sense, and float-float of float-margin do not properly explain how to document them in css file. thanks!

  28. @miro: All the examples have this text on them: “You can have a look at the CSS file if you want.” with the “CSS file” being a link to the right CSS file. Have a look at the and tell me if that makes things clearer.

  29. Hi, I’m kind of used to employing tables to make my design layouts. I realise it isn’t “the right way” to do this and I started looking for a way to do the same thing with CSS. You see, I’m more of a graphic designer and not a developer, so the final look is what is important to me most. The problem I face is that I haven’t come across a technique to define complex graphic design with CSS. If you use a border with CSS it is a one solid border all along one side, but what if I need to make it gradually fade to background colour towards the top of a box? With tables it is simple – place a fading gif in a table cell and the job is done. Lets say http://www.ardo.lt – how do you define design like this with CSS? Any suggestions or links to advanced CSS with advanced design techniques would be much appreciated.

  30. @Larry: That layout is a little to big to go through in a comment like this but I can tell you the general idea: You build up a grid pretty much in the same way as with tables. The difference is that the grids are a lot more flexible than their table counterparts. After that you start to aply background-images to the different blocks. That allows you do do things like gradients, shadows and those things. CSS allows you to decide in what direction to repeat images, so you don’t need another block to have something in the right corner of another.

    Hope that gives you some ideas.

  31. Pingback: Plantillas CSS » CalinSoft | Adictos al Desarrollo Web
  32. Very skillfully boiled down to only the essentials, and presented very logically.

    I wish I had found this resource two years ago.

    Just quick suggestion tho. It might be useful to include the year when you present dates.

  33. Pingback: Plantillas CSS Básicas › CalinSoft
  34. Pingback: Plantillas CSS Básicas › CalinSoft
  35. Very nice article to understanding the basic principles of float elements…as well as to understand the structure of div’s columns…Cheers Harshad D.

  36. Pingback: Kundo! | Anton Malmberg
  37. Larry, I’m totally with you there, and I’m not a designer, just a web developer / programmer.

    I detest the decision to deny us the full usefulness of tables. Row height has been rendered useless, and this was a staple of many wonderful layouts. There was *no* real disadvantage, in the *real world*, to using tables.

    As for using FLOATS for layout, that is *plagued* with problems. Try using a “clear:both” in any part of your body content, or menu content, and your template is destroyed. That’s because “clear” clears *all floats on the page* not just the last one encountered.

    Using floats for templates is nicely conformist, but highly impractical unless you are very careful with page content so it doesn’t break the layout. That makes it a pain for CMS applications for a start.

    The W3C is living in lala land when it comes to the needs of both designers and web app coders. If they just hadn’t deprecated table row height it wouldn’t be so bad. The fact they’re now formalising the “border-box” option in CSS3 means many, many people have complained! IE did have a valid position, no matter what the purists say.

    /rant

  38. As an example of my above statement, of “clear” breaking floated layouts, just do this:

    In the example given on this page, “3 columns using float-margin”, add the following code to the “content2″ block (replace square brackets of course):

    [div style=”float:left”]float this left[/div]
    [div style=”clear:both”][/div]
    [div]template is now broken[/div]

    When you add the above code, the “broken” words are placed below the level of the “content1” block. It is no longer flowing directly under the content2 text.

    This is a problem where the “clear” appears in a column which is not as tall as one of the others. The text suddenly jumps to the lowest position on the page.

    Therefore, using floats for layouts is ONLY practical if you NEVER need to use “clear:both” in your content.

  39. @David: If you use the float-float method, you will see that the issue with clear: both does not exist there.

    If you want to use float-margin, you can still use clearfix to clear your content. So the templates are all fine, and we need no tables for layout.

  40. These are very handy bits of code to get a css layout started. I’ve had this page bookmarked for quite some time and I refer back to it often when I’m working on page layouts.
    Just wanted to say thanks!

  41. By examining both the methods of layouts, I feel like going for the float-float method though both have there pros. The float-float method offers more clarity and looks more better to the eye though I am in complete agreement with the view that you can work with float-margin method more easily as the second column expands automatically.

Comments are closed.