basic 2 column pure css tutorial

roy92

roy92

CSS HAXOR
Since starting on learning CSS, I have found it to be extremely (as in extremely) easy to make websites (in fact, it's easier to use this method than using tables) you don't even need a WYSIWYG editor, just Firefox:P and notepad. So let's start.

So I assume you have basic knowledge of css if you don't, maybe when I get some free time and a clear head:doh: I'll do a quick tutorial on that.

here's our basic layout on css

Code: 
body {
}
#container{
}
#header{
}
#content{
}
#menu{
}
#footer{
}

and the "DIV's" in HTML

Code: 
<html>
<head>
<link rel="stylesheet" a href="layout.css" type="text/css" />
</head>
<body>
<div align="center">
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="menu"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>

that's just the basic layout, your browser shouldn't show you anything right now, if it does, please double check. Also, that's all you have to put on your HTML document as far as coding is concerned, that is if you want to add a title or javascript or other stylesheets.

now to make it a 2 column layout
Code: 
body {
}
#container{
width: 800px;
}
#header{/*this is where you put your banner or header*/
width: 100% /*this is relative to the container's width so this will equal 800px*/
}
#content{/*this is where your main content goes*/
width: 500px;
float: left; /*the content part of the layout will float to the left side of the page*/
}
#menu{/*this is where your menu goes*/
width: 300px;
float: right; /*the menu or navigation will float to the right side of the page*/
}
#footer{/*this is where your footer goes*/
width: 100%;
float: left; /*the footer by now shouldn't need this as the content and menu leave it no where to go but under it, but it's a bug in the browser's (i think)*/
}

so your page is all set up now, but you won't see anything in your browser yet until you add the content to your site and make the site prettier.
and that's it, you can now style up (as in specify the background of the body (whole page) and the header, menu, nav and footer. If you wanna get nifty, then reduce the 150px from the menu and make another column

Code: 
#othercolumn {
width: 150px;
float: left;
}

this will now be a 3 column page!

hope this will be a help to someone learning CSS (I kinda rushed it though, sorry, but I'll refine this tutorial with pictures and other examples next time) and once you get the hang of it, I'm sure you will find it very powerful. Stay tuned for more tutorials...
 
Nice tutorial, I'd like to comment and add slightly if I could:
I wouldn't use:
Code: 
<div align="center">
to center the page, it's bad code practice (even though with HTML it'll be valid, xHTML standards are better though and good coding practice / standards are always nice) - do everything with CSS. Also make sure to declare the DOCTYPE ;)
In FF (as well as Opera and Safari I think) you should use:
Code: 
margin-left: auto;
margin-right: auto;
in:
Code: 
#container {
}
For IE you should use:
Code: 
text-align: center;
in:
Code: 
body {
}
as IE even treats divs like text and will center them with that.

Web designers and coders shouldn't have to use 'hacks' for IE, but we do, which sucks.
 
thanks so much matt555,

the doctype, yes, i left that out coz i was in a rush, so sorry i'll put that in later.

about the div align center, I've just gotten used to that, but true, it is valid, but people who know better dont use it.

also, y can't IE and FF just get along? :P
 
You must log in or register to reply here.
Back
Top