2 Column Layout
Forward...
A common problem in CSS is the fact that if you float a div on either side of a body of text. The div will expand to fit the content. WEll how would you get your div to get to appear like its actually going all the way down the page? SIMPLE!
So the problem is that <div>'s only expand vertically as far as they need to, or unless they are given a height propery. Now, in a Standard Compliant Browser you can use the Min-Height css attribute to achieve a good layout, but that is not what we want.
Our goal
We want the two columns to appear to be equal in length.
The Markup...
Basically, all we really need to do is make a vertically tiled background image that spans the height of both columns. To do this, we need to make a containing <div>
Now, we need to add our two columns and a header.
A little bit of explaining... our container will hold the 3 parts of our layout, the header, the left column, and the main column. now, this may seem easier to do with tables, but if you look closer, you will notice that it actually takes MORE tags to get this layout.
Tables are much more painful, and thats why are using <div>'s.
The CSS...
Now on to css. This is fairly straight forward. Basically all we are going to do is add styles to our container div, and then make our other div's position that way.
I want a 600px wide centered layout, so i'm going to add a style width of 600px to my container <div>, and then add a margin:auto; to make it center itself.
Now the simple little secret to this layout is that we add a tiled background image to our container <div>. Becuase, no matter if either column is longer than the other, the container div will have to stretch as far as the last one!
So here is our background tile image:
And here is the style for a tiled bg image. It assumes that the image is placed in the same directory as the css's current location.
Next, we have to add a style to our header <div> so you can see it.
Now, this is all fine and dandy, and we still havent positioned our columns. So next, we need to do that! So, here is the style used for the left and center columns:
As you can see, we defined the width of the left column to 200px. This is because that is the width of the red strip on our background tile. Now, on the main column, we made sure that the text wouldnt wrap around the floating <div>, by adding a margin-left property equal to that of the width of the left column.
Your final css should look something like this:
And, if you were to see this page in a web browser, it would look like this:
FLOAT LAYOUT PAGE
I hope you have learned something from this tutorial. In order to fully understand CSS, i would also head over to w3schools and read up on standards and CSS.
A common problem in CSS is the fact that if you float a div on either side of a body of text. The div will expand to fit the content. WEll how would you get your div to get to appear like its actually going all the way down the page? SIMPLE!
So the problem is that <div>'s only expand vertically as far as they need to, or unless they are given a height propery. Now, in a Standard Compliant Browser you can use the Min-Height css attribute to achieve a good layout, but that is not what we want.
Our goal
We want the two columns to appear to be equal in length.
The Markup...
Basically, all we really need to do is make a vertically tiled background image that spans the height of both columns. To do this, we need to make a containing <div>
HTML Code:
<div id="container"> </div>
HTML Code:
<div id="container"> <div id="header"> This is the banner area... </div> <div id="left"> this is the left column </div> <div id="main"> This is the main column </div> </div>
HTML Code:
<table> <tr> <td colspan="2"> This is the banner area... </td> </tr> <tr> <td> this is the left column... </td> <td> This is the main column... </td> </tr> </table>
The CSS...
Now on to css. This is fairly straight forward. Basically all we are going to do is add styles to our container div, and then make our other div's position that way.
I want a 600px wide centered layout, so i'm going to add a style width of 600px to my container <div>, and then add a margin:auto; to make it center itself.
HTML Code:
<style type="text/css"> #container { width:600px; margin:10px auto; } </style>
So here is our background tile image:
And here is the style for a tiled bg image. It assumes that the image is placed in the same directory as the css's current location.
HTML Code:
<style type="text/css"> #container { width:600px; margin:10px auto; background: #bbff02 url(2.gif); } </style>
HTML Code:
<style type="text/css"> #header { height:100px; width:100%; background-color: #FF8302; } </style>
Now, this is all fine and dandy, and we still havent positioned our columns. So next, we need to do that! So, here is the style used for the left and center columns:
HTML Code:
<style type="text/css"> #left { width:200px; background-color: transparent; color:#000000; } #main { margin-left:200px; background-color: transparent; color:#000000; } </style>
Your final css should look something like this:
HTML Code:
<style type="text/css"> #container { width:600px; margin:10px auto; background: #bbff02 url(2.gif); } #header { height:100px; width:100%; background-color: #FF8302; } #left { width:200px; background-color: transparent; color:#000000; } #main { margin-left:200px; background-color: transparent; color:#000000; } </style>
FLOAT LAYOUT PAGE
I hope you have learned something from this tutorial. In order to fully understand CSS, i would also head over to w3schools and read up on standards and CSS.
