      
Introduction
Welcome to the 2 Column Fixed CSS Layout. In this tutorial you will learn how to create the a 2 columned layout in Pure CSS and standards complaint XHTML. Please do not copy & paste the code for this tutorial. Learn it. It's a waste of my time if you're just going to copy + paste the code that I post to teach you. Hoefully, by the end, you will have learnt.
Enjoy the tutorial! Table of Contents
Standards Complaint XHTML Page So before we start doing our CSS styling, we need to create our XHTML that will get our CSS code and display it accordingly. [code=HTML] <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Fixed 2 Col CSS Layout - Writen by ChrisGilmore for Pixel2Life.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- CSS Will go here --> </style> </head> <body> <div id="header">Header Text</div> <div id="navigation"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div id="maincontent">Main content goes here</div> <div id="footer">� Pixel2Life.com - Fixed 2 Col CSS Layout written by ChrisGilmore</div> </body> </html> [/code] Most of this code you may have seen before with the <head> and <body> tags, there the basics of all HTML documents; CSS or no CSS. To this tutorial, however, it's the bit between the <body> tags such as <div id="header">. What these basically do is open up the css elements that have the same name variable as those defined in the <div> tags. Standards Complaint CSS Now for the bit that displays the page how we want it too. We will code this in pure CSS, which is one of the latest crazes in web design at the moment. Since this is the main part of this tutorial, I'm going to explain each set of code bit by bit. Body [code=css] body{ font: 80% arial,sans-serif; text-align:center; padding: 0; margin: 0; } [/code] Ok, so you know the <body> part of your (X)HTML page? Well this basically styles it. font: 80% arial,sans-serif; This applies a font size of 80% with a font face of Arial or any other sans-serif font. text-align: center; The next align centers all text, which helps us centre all our elements (header, navigation etc.). padding: 0; margin: 0; And the final 2 lines sets all padding and margins to 0 which makes all the edges of our div elements flush against the side of the browser window. A - Anchor Tags (Links) [code=css] a{ display:block; color: #006; padding:10px; } [/code] I bet you can remember the anchor tags <a href> etc. Well this block of code basically styles all links in your (X)HTML code. display: block; This makes it a block, or a button in this case. color: #006 Defines what color the text link will be. padding: 10px; Adds some padding of 10 pixels so that the links aren't squashed together. Paragraph Styling [code=css] p{ margin: 5px; } [/code] margin:5px; This adds a margin of 5px to all Paragraph tags (<p>), we've added this so the text is a bit more easily read rather than squashed up against the sides. Wrapper/Container [code=css] #wrapper{ width:700px; margin:0 auto; text-align: left; } [/code] This block of code is our wrapper or contain. It will contain all of our CSS elements such as header, navigation etc. width: 700px; This gives our wrapper 700px of width. margin: 0 auto; This makes our wrapper have auto margins, so it will have equal margins on both sides of the wrapper, in other words it centers it. text-algin: left; This aligns all text, contained within the warpper, to the left. Header [code=css] #header{ width: 100%; padding: 5px; background: #EEE; color: #336699; } [/code] This code creates the header element of our layout. width: 100%; This gives it an automatically expanding width of 100%; which means that it will expand full width of anything we put it in. Since the width of the container is 700px, it will expand it to 700px. padding: 5px; Here we add 5px padding to make it a little easier to read. background: #EEE; color: #336699; This sets the colors of our background and text. Footer [code=css] #footer{ background: #000; color: #FFF; padding: 5px; clear:both; width:100%; } [/code] Obviously this is the CSS of the footer element. background: #00; color: #FFF; This sets the colors of the background and text. padding: 5px; We add 5px worth of padding. clear: both This sets the footer to put istelf beneath all of the other elements in the container. width: 100%; And like the header, we've set the width to 100%. Main Content [code=css] #maincontent{ float:right; width: 600px; } [/code] This creates our main content area. float: right; Since we want this too be on the right hand side we use the float variable to do this. It's a very usefull variable. width: 600px; Sets the width to 600px. Navigation [code=css] #navigation{ float:left; width:100px; background: #CCCCCC; } [/code] This creates our navigation. float: left; So, we've placed our main content on the right hand side so why not put our navigation on the left hand side?. Again, we do that using the float variable and setting it to left. width: 100px; Now, we add a width of 100px. Remember, our wrapper is 700px and the main content is 600px so we've only got 100px of width here left, if you want the navigation bigger you would have to reduce the main content or increase the wrapper. background: #CCCCCC; Sets the background color of the element. Conclusion Ok so now you should have a 2 collumned CSS layout, hopefully you will have learnt some important techniques in CSS Layouts such as the float element. Example Files:  File Download: Fixed 2 Col CSS Layout Example FilesAnd that concludes our 873 words spread over 4 pages tutorial. Thanks for reading and learning! 
Dig this tutorial?
Thank the author by sending him a few P2L credits!
ChrisGilmore
Hey there, My name is ChrisGilmore and I was chosen to be a Publishing Betazoid to the infamous Pixel2Life. I've been in computers for a long time now and have really gotten into Web Development over the past 1.5 years. There seems no end to new techn 
|
