WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
CSS Tutorials

Sharing knowledge is cool and if your audience is willing to learn – its Uber cool! 🙂 With that note, here is my little contribution towards the code monkeys.

This article is meant for the people who are beginners or are in the mid-way of learning CSS (Cascading Style Sheets). When I started learning CSS, the most difficult problem that I faced was using floats and how to align and position the divisions (DIVs) in a page.

In a pure CSS based design, the formula for coding your layout lies in the fact, as to how best you can position your DIV tags. In this article, I will try and give you a better understanding of using the float property of CSS to position your elements.

Let us assume that we want to create a 3-column layout for our new WordPress theme. I am taking up this example because many people do not understand how to do this and have asked me questions in the past about this technique. In this tutorial, I am assuming that you know the basics of HTML.

Step 1

Make a blank HTML file called page.html and a blank CSS file called style.css and put them in the same place or folder together.

Now, open the HTML file in any text editor and paste this code in it.

My CSS Layout
	<link href="style.css" rel="stylesheet" type="text/css" />
<div id="wrapper"></div>
<!--end wrapper-->

All right. Let me explain this code to you. This is the basic framework from where we are going to build the 3-column layout. The first line declares the DOCTYPE which is important when you build standards compliant code. The fourth line in this code makes a call for your stylesheet file (style.css) that you should have placed in the same location as your page.html file. In the body part, I have declared a DIV and given it an identifier (ID) called wrapper. We will use this ID in our style.css and assign it different properties. Rest is basic HTML.

Step 2

Open your style.css file and put this code in it.

* {margin:0; padding:0;}
body {margin:auto; background-color:#C3D9FF; font:12px Verdana; color:#000;}
#wrapper {margin:20px auto; width:950px;}

The width:950px; will limit your total page area (in the wrapper DIV) to 950 pixels and margin:20px auto; will center your content giving it a margin of 20 pixels from the top of your browser. We will use this as the wrapper for your whole layout as we plan to make a fixed-width layout of 950 pixels.

Now open your page.html file in the editor and paste this content in between the starting and ending of wrapper DIV tags.

 <div id="wrapper">
 <div id="header">
</div><!--header-->

 <div id="sidebar1">
</div><!--sidebar1-->

 <div id="content">
</div><!--content-->

 <div id="sidebar2">
</div><!--sidebar2-->

 <div id="footer">
</div><!--footer-->
</div><!--wrapper-->

The IDs of the above DIVs are pretty self-explanatory and you can see what I am planning to do in the layout. There will be a header on the top (#header), a sidebar on the left (#sidebar1), content area in the middle (#content), a sidebar on the right (#sidebar2) and finally a footer (#footer) on the bottom. We will now try and style these DIVs in our style.css file which will position everything in the right place.

Step 3

Open your style.css file and start adding the following lines of code, one line at a time, after reading explanation for each one of them.

#header {width:930px; padding:10px; height:100px; background-color:#6192DF; font:30px Arial;}

This will define the header with 930 pixels width, give it a padding of 10 pixels on each side (top, right, bottom, left). If you take a total, the total width of this DIV will be 930+10(left)+10(right)=950px which is also equal to the width of the wrapper DIV. Height property fixes the height of the header to 100 pixels, background-color:#6192DF; gives it light blue background color and font:30px Arial; specifies the font size and family.

#sidebar1 {width:180px; padding:10px; float:left; background-color:#8BABDF;}

This does all the things similar except adding a float:left; property which will position this #sidebar1 DIV to the extreme left inside of wrapper DIV. Also note, the total width of sidebar including padding on both sides is 200px.

#content {width:530px; padding:10px; float:left; background-color:#FFFFFF;}

This positions the content left of the #sidebar1 DIV inside the wrapper DIV. Its total width is 550px including padding on both sides.

#sidebar2 {width:180px; padding:10px; float:left; background-color:#8BABDF;}

This will place the #sidebar2 to the left of the content making it 200px wide including the padding on both sides. So if you observe carefully, #sidebar1, #content and #sidebar2 are placed adjacent to each other now.

#footer {width:930px; padding:10px; height:30px; background-color:#6192DF; clear:both;}

Finally, we define the #footer with a total width of 950px including the padding on both sides.

You will see that there is a special property that has been added to the footer DIV called clear:both;. This is where most people get confused. When you are floating more than one divisions by placing them adjacently, you need to clear all the floats before styling the further content. In this case both the sidebars and the content are floating together. So, in order to clear the floats, we assign this property in the footer DIV which anyway comes at the bottom and clears the above floats.

Now, all our code is ready and its time to execute. But before we do that, Just place some dummy content in your header, sidebar1, content, sidebar2 and the footer DIVs by editing the page.html. You can use this block as the dummy content :-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pretium tincidunt tellus. Donec bibendum. Sed gravida eros eget odio. Vivamus nec ante nec dui suscipit faucibus. Nunc mollis imperdiet metus. Donec aliquet interdum quam. Ut tempus arcu a urna. Nullam adipiscing mi id ligula. Nam sollicitudin placerat metus. Morbi tempus consequat dui.

After you have done so, double-click your page.html to execute it. If you have done everything correctly, you should see something like this in your browser window and it should work exactly the same, both in Internet Explorer and Firefox.

CSS 3-column layout

Here are the final files if you want to download them :- CSS 3-Column Layout

So, there we have the wonderful 3-column layout all ready for you. I hope you liked this little tutorial of mine and I am sure it will clear many doubts for those struggling with CSS and layouts. Please do not forget to write some comments because those are what make my day 🙂

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. HGIT left a comment on March 29, 2016 at 1:24 am |

    Aluminum thermal barrier machine is designed for pouring thermal insulating polyurethane adhesive into aluminum profiles. It drives the aluminum profile to go with a smooth and uniform movement by the hydraulic system along a specified direction. Then the precise measurement system makes A,B components do an instant high-speed and uniform mixing. After that polyurethane flows injection into groove in accordance with the provisions of the ratio to complete the casting process. Aluminum thermal barrier machine is usually used for insulating the aluminum windows and doors and other industries, the apprance of aluminum thermal barrier machine make us can feel very cool in summer and feel warmer in winter. Aluminum thermal barrier machine helps us solve many problems.
    http://www.hgcx.cn/en/index.php

  2. teeside left a comment on May 28, 2013 at 7:26 pm |

    Thanks for this tutorial, I had worked through two books trying to clarify the concept but didn’t really get it till going through this post. Very brief, clear, and helpful.

  3. Akmwebtech left a comment on October 22, 2012 at 3:19 am |

    nice

    thanks for this tutorial .

  4. Benjamin left a comment on March 9, 2012 at 8:31 pm |

    Hey, some of the blacks of code are blacked out! That’s not very nice!

  5. ame left a comment on December 14, 2011 at 1:16 pm |

    Hey! I’m using FF 3.6 because I’m on Mac OS 10.4– I’m sure it is not my computer as I can see all of your code examples, but your first code example you provided (DOCTYPE) is missing. I can’t see it, but I can see the rest of the code.

  6. scott left a comment on August 21, 2008 at 9:15 pm |

    False alarm. It does work on IE7! it was the dreaded “new coder do something stupid” error.

    Thanks again for this !
    Scott

  7. scott left a comment on August 21, 2008 at 9:09 pm |

    This is not working for me at all on IE7. Anyone have any solutions?

    Great blog! Thank you.

  8. Jason Geek left a comment on August 11, 2008 at 10:52 am |

    thanks for the tutorial. it is really useful for me:D

  9. sohn left a comment on July 6, 2008 at 3:38 am |

    Thank you very much!! your blog really useful! love it.

  10. jimmy left a comment on May 6, 2008 at 8:07 pm |

    This is great–so many 3 column CSS layouts leave out the float part.. they just give you a static page and expect you to figure out all those details. This is one of the very few layouts that at least in the browser where i’m viewing it… it would be acceptable in a corporate setting. Few or no businesses would actually accept one of those fluid center or completely fluid layouts… they end up looking horrible too easily–I think you in most cases (for a business) need a layout with some strict minimums, but you need it to also be expandable for those readers with poor vision that love to explode the text.. which breaks any poor CSS layout which also leaves me wondering why I just didn’t stick with tables

  11. topher left a comment on May 1, 2008 at 8:14 am |

    I meant 100% height for the layout

  12. topher left a comment on May 1, 2008 at 8:14 am |

    great concept. However, what about 100% so the footer sticks to the bottom of the browser window? I keep getting the ghost scrollbars in IE. 🙁

  13. sila left a comment on April 28, 2008 at 10:46 am |

    thanks

  14. MyDeskBlog.com left a comment on April 26, 2008 at 11:52 pm |

    If you guys are already taking the trouble to code your own site/blog’s theme, might as well search for tutorials that put content div ahead of sidebar divs. SEO wise, its supposedly better to have content positioned as close to the top as possible. All I know is, there ain’t a lot of 3-column tutorials that does content div first. Perhaps you should write one, Jai?

  15. Kingston left a comment on April 25, 2008 at 7:02 pm |

    did u check the design in ie6 and ie 7

  16. Nischal left a comment on April 25, 2008 at 4:23 pm |

    Very nice guide, one thing, when you add content to that page, will it extend all the way until the content’s end? The sidebar and the content page? If not can you tell me that code for extending it. I think it might be height:100%;

  17. John left a comment on April 15, 2008 at 7:16 am |

    For absolute positioning you would do something like the following:

    [code]

    Left content

    center content

    right content

    [/code]

    And then CSS like this:

    [code]
    div#innerWrap
    {
    position: relative;
    margin: 0;
    padding: 0;
    }

    div#innerWrap #left
    {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    }

    div#innerWrap #center
    {
    position: absolute;
    top: 0;
    left: 150px;
    width: 300px;
    }

    div#innerWrap #right
    {
    position: absolute;
    top: 0;
    left: 450px;
    width: 150px;
    }
    [/code]

    I would add some padding and adjust widths accordingly though to make your styles nicer.

  18. Alan Kellogg left a comment on April 14, 2008 at 4:50 am |

    Follow Up

    Turns out it’s not that easy in Techicon. The style sheet calls first for the sidebar file, which then calls for the three sidebars in order. My recommendation would be to delete the sidebar file entirely, and call for each individual sidebar from within the style sheet itself. That way you can order each page element as you wish by editing the style sheet.

  19. Alan Kellogg left a comment on April 14, 2008 at 4:29 am |

    For you it’s a compliment. For most other WordPress theme designers…

    BTW, can’t find the sign-up form for your forums. got a question regarding converting a static layout to fluid. Since you did so well with the layout tutorial I’d like to urge you to do one on static to fluid and fluid to static themes.

  20. Jai left a comment on April 14, 2008 at 4:19 am |

    @Alan Kellogg: Yes. You are right on the dot. Btw, I did not get your question at the end…Is that a compliment or what 🙂

  21. Alan Kellogg left a comment on April 14, 2008 at 4:16 am |

    Jai,

    So when calling for divisions when the division is called for in the HTML file is what matters. So by editing the Page.html file in Techicon so the sequence is…

    [div id=”sidebar 1″]
    [/div]
    [div id=”content”]
    [/div]
    [div id=”sidebar 2″]
    [/div]
    [div id=”sidebar 3]
    [/div]

    (where “[” stands in for “<“)

    …would give one a layout of sidebar, content, sidebar, sidebar. Just want to be sure.

    BTW, you make things comprehensive and comprehensible. Are you sure you’re a WordPress theme designer?

  22. Jai left a comment on April 14, 2008 at 12:35 am |

    @Eddie Poh: No, the layout change will not affect your rankings as long as your textual content does not change.

  23. Eddie Poh left a comment on April 13, 2008 at 9:15 pm |

    I wish to change the CSS outlook on my website which is doing quite good in SERP.

    Will the change affect the rankings? Because it might affect spider reading pattern…I don’t know.

  24. Jai left a comment on April 13, 2008 at 9:05 pm |

    @stan: You place the code in the mypage.html file between the starting and ending DIV tags.

    for example, between

    and

  25. stan left a comment on April 13, 2008 at 8:20 pm |

    Where and how do you place the dummy code?
    Thanks for the tutorial!

  26. Chris left a comment on April 13, 2008 at 5:33 pm |

    Terrific tutorial. Keep practicing on us, your fans, who can always be counted on to ask brilliant (and sometimes newbie) questions so you can refine your tutorials further. After you’ve tested out your tutorials on us, I predict you have a “how to” book in you. I’ve read what’s out there on WP, and none have come close to offering what your quick and clear tutorial did. I finished (and loved) Headfirst HTML with CSS and XHTML (yep, I’m a newbie), and with that beginner’s background, I was able to easily follow and really appreciate your tutorial that showed me how to do CSS relevant to WP. I definitely see a niche for a book that’s a hands on tutorial for WP. I’d be the first to buy it! Thanks.

  27. Avinash left a comment on April 13, 2008 at 4:43 am |

    Thanks for sharing this info Jai. It was very useful. Keep up the good work 🙂

  28. prudat left a comment on April 13, 2008 at 12:33 am |

    This helped me a lot, did you mean 950 pixels for the image background in the answer to Dan’s question? 900 would not be wide enough.

    I am looking forward to any other tutorials you put together. I will add you to my RSS.

  29. José Martins left a comment on April 12, 2008 at 10:29 am |

    Hi Jai, when i told size I was refering to height, but my question was asnswered in Dan’s question. Thanks!

  30. @ouni left a comment on April 12, 2008 at 10:13 am |

    Great job Jai. I’ve been trying to improve my skills in CSS lately. It’s enjoyable to learn it, specially in cases where I have to edit few things in the style of my blog. However I am still unable to grasp how CSS can be coded to meet all browser specification. I wish you have a look at my blog & drop me a hint on how to solve the page exceeding with error on IE6 and 7, not to mention that on Firefox it looks very much different.

    I notice sometimes that a small modification in the CSS code may let the sky fall!

    Thanks again and I’m looking for more future lesson. Hope I made your day 🙂

  31. Indra left a comment on April 12, 2008 at 9:52 am |

    Thank you so much for the enlightment! Will put it to a good use. Do you know any good tutorial on creating custom wordpress template by any chance? I know HTML and CSS, but had no idea about PHP. So yea, is there any special “functions” or code to built a WordPress template? Thanks.

  32. elyisus left a comment on April 12, 2008 at 12:39 am |

    That was great! It is like the first really very important thing to really get you started into the very important zone where this thing of customizing or creating blog themes, and then a lot more than that, starts for real.

    I was already good at html and familiar with general css, styles sheets, your explanation bridged very well toward themes creation and also, although not directly, with php.

    Thanks, really!

    things are twice as good when they are short.
    Your explanation was complete and SHORT.

    Thanks!!!!!!!!!!!

  33. Jai left a comment on April 11, 2008 at 10:33 pm |

    @Dan: That is a very good question Dan. Ideally, we do not give the height parameter to the columns because when the content is more, it will go out of the div since we have specified a specific height. So to avoid that, we use background-image concept.

    To give it a look of three columns, make an image (1px height and 900px width) which should have three partitions (sidebar1-blue color, content-white color, sidebar2-blue color) and tile it vertically (repeat-y) for the wrapper tag. Now you will not have to specify colors in the CSS for any of your bars because the image will do that for you by tiling across the y-axis.

    I hope that clears it.

  34. veerendra left a comment on April 11, 2008 at 10:31 pm |

    great article.

    # It_has {
    clear:both; /* cleared my confusion and concepts */
    }

    thanks a millions ! 🙂

  35. happyguy left a comment on April 11, 2008 at 10:29 pm |

    it was what i have been looking for !
    the owner of this blog is one of my favorite persons

  36. Dan left a comment on April 11, 2008 at 8:18 pm |

    How can you make each column extend all the way to the footer?

  37. SEO Blog Wire left a comment on April 11, 2008 at 7:00 pm |

    Extremely great! A CSS breakthrough…I’ve been having a lot of trouble with floating divs but this is going to help me out create a theme. Thank you! I always had trouble with my divs breaking up…

  38. Jai left a comment on April 11, 2008 at 4:13 pm |

    @igmuska: Absolute layers works in a completely different way. They cannot be wrapped since you have to actually draw out the coordinates where to put them on the page.

  39. igmuska left a comment on April 11, 2008 at 3:55 pm |

    Jai, you have helped me get closer to a major CSS breakthrough, THANKS…I still am having difficulty with wrapping an absolute positioned element within an relative positioned element. Any advice?

  40. Jai left a comment on April 11, 2008 at 3:25 pm |

    @Jose: You have to divide and do the maths. For example, if your fixed width is 900px and you want all the inner divs to be 300px each then just give them width:300px; each. Or, if you want padding in them, say, 10px in each side of the div, just reduce 20 from the width of each DIV. So, width for each div will be 280px.

    Hope this helps you.

  41. José Martins left a comment on April 11, 2008 at 3:22 pm |

    I’ve a doubt!!! How can we put de side bars with the same size of the main content?

  42. pemmax left a comment on April 11, 2008 at 2:58 pm |

    Jai I`m your fan! Great guide. It`s simple and easy to understand. Thanks!

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project