CSS Tutorial: Creating A Two-Column Design
Posted on the 16 November, 2004. Vote: + 8 - 3
An easy guide to making your own two-column layout using cascading style sheets. No tables - just divs and layers.
Author: Cissi
Email: netizenette@gmail.com
Website: don't squeeze my world.You might wonder, why should I learn table-less CSS design, because it can be such a hassle? I think most webmasters are aware by now that some browsers [namely Internet Explorer] have wildly different interpretations of CSS than others. Well, in my opinion, the effort required to learn and have cross-operational CSS is worth it. For me, CSS offers more flexibility, and drastically reduces the amount of coding required. Once you understand the basics of CSS, creating websites can be a breeze.
CSS can seem daunting initially, but once you master the basics it is quite easy to learn. Below is an example of how easy it can be to create a table-less, two-column CSS design. I've kept the code to a bare minimum for brevity, but feel free to experiment. You can view the end result here.
The CSS Code:
I will start off with the "body" attribute. This attribute informs the browser of the basics of the site - for instance, the background color and the width of the site. Here is the example "body" section:
body {
margin: 0px auto;
background-color: #ffffff;
width: 700px;
text-align: center;
}
The "margin: 0px auto" attribute informs the site to automatically align the page according to a browser's resolution - at least in Mozilla/Firefox. This attribute does not always work for Internet Explorer, so I have added a "text-align: center" attribute to ensure the page will align to the centre of the page.
I have chosen 700px with the example. There are still people who use 800x600 resolutions, so my advice is never have a site that is wider than 780px unless your page can be resized according to a monitor's resolution.
Following the "body" attribute is what I've called "#page". You can call this whatever you want [a common name for it is #container]. From my experience, IE requires a DIV attribute for the page itself:
#page {
width: 700px;
text-align: center;
}
#header {
margin-top: 20px;
width: 700px;
padding-top: 50px;
padding-bottom: 50px;
}
I want the "#header" to go right across, and therefore it is the same width as the "#page". The attribute "margin-top" informs the page that the header will sit 20px below the top of the page. The "padding" attribute defines the dimensons of space within the DIV. I have "padding-top: 50px;", which indicates I want 50px of space between the top of the DIV, and "padding-bottom: 50px" indicates I want the content to have 50px of space below its content.
After the "header" is the main content, which are coded below. I have called the main content area the "#centercolumn", and the right menu area the "#side". Here is how both are coded:
#centercolumn {
float : left;
width : 450px;
margin-top : 10px;
margin-bottom : 10px;
padding: 5px;
border: 1px solid #000000;
text-align: left;
}
#side {
float : right;
width : 200px;
margin-top : 10px;
text-align: left;
border: 1px solid #000000;
}
The "centercolumn" is floated to the left as I would like it to sit on the left side of the page. The "side" is floated to the right as I would like it to sit on the right.
The HTML Code:
I've found that Internet Explorer can be a little picky when it comes to how you arrange the code. My general rule is to order elements according to the actual order of their appearance. I have found that it also helps when editing pages if the code is in order. Here is how I would arrange the above code:
<body>
<div id="page">
<div id="header"></div>
<div id="centercolumn"></div>
<div id="side"></div>
The very first element is the "page", as it is the area that holds the main area. "Header" comes second, because it is the element I want at the top of the page. Next comes the "centercolumn", as it holds the main content. The final element is the "side".
Well, there you have it - a two-column design using CSS. It wasn't that hard, was it? If you would like more information about CSS, I recommend a visit to W3Schools.
Doesn’t always work. At least, not like you think. Floated elements extend beyond the boundaries of their containers. In your example, many attributes of “page” would be lost, such as possible border effects, background, etc., because there aren’t any non-floated elements of “page” to extend its boundaries. So you can’t use that technique, for instance, if you wanted to enclose the contents in a page-size box.
john (email) - 20 February, 2005.
Well John, this can be fixed by adding a after the centercolumn. (don’t trust this one blindly, need to be tweaked for Mac/IE with a 1% height or something)
Cissy, body:0 auto; doesn’t allways work in some browsers (don’t know the exact onse but cannot be bothered to look them up right now, I guess Opera is amongst them) therefor it would be better to just specify them seperatly ->
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
...and close your page div and body ;-) , just trying to be funny.
Tobias (email) (link) - 03 April, 2005.
I should have known ->
’...by adding a <> & n b s p ; <> (offcourse without the spaces) after the centercolumn….’
Tobias (email) (link) - 03 April, 2005.
Hmm, I’m flooding this commentsection ->
<> off course
Tobias (email) (link) - 03 April, 2005.
Just starting with Pivot – love it!
I’ve revamped my site based upon your Pressed Leaves template, and have converted it to 2 column. However, the first pereson to post a message with a link in it broke the layout – it went across into the right column.
I’m an ex-programmer (best kind of programmer to be!) but know little about CSS yet.
Michael (email) - 15 May, 2005.
Every girl love beautiful and fashion, especially the bags,coach handbags are so beautiful and designer that the girls who want one.wellcome to my web http://www.coach-handbags-outlet.com/ coach handbags,we supplier all kinds of coach handbags and all colors for choice.
http://www.coachoutletfactory.com coach outlet
coach handbags (email) (link) - 28 June, 2010.