| How to make a 2 column layout with CSS |
 |
 |
 |
| CSS - Intermediate | |||||||||
| Written by Stuart Duncan | |||||||||
| Tuesday, 10 November 2009 22:43 | |||||||||
|
So you've mastered making things look nice and giving things borders, moving things around a bit and maybe even getting things to go side by side but the real holy grail in CSS is getting a full layout to look rigth in not just your browser, but everyone's browser... and to do it without a single table. There are a lot of ways to do this but before we get ahead of ourselves, let's look at nice clean and simple way to accomplish our task within just a few minutes.
A good first step in any page building exercise is to scope out exactly what it is you want ahead of time and in our case, we're going to go for the basic wordpress type of layout with a header at the top, with some basic navigation, a main content column showing the content, a small side bar along the right hand side with your content navigation in it and then a footer. Nothing too complicated, just a little something to get us started.
Step 1.Now that we know what we want, we have to put pen to paper, so speak and start building our framework that we will eventually mold into our house. It is important to start with the proper DOCTYPE on any HTML page that you wish to work with CSS in. The reason for this is that you will want to force browsers (cough IE cough) to try to conform to web standards as much as possible. This will make your CSS look as close to the same in every browser as possible. So in your HTML page, put this: <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> This is what tells browsers to be 'strict' with the standards and try to follow the rules. Once we have, we can do our HTML page like normal with html tags, head, body and the start of our content.
Looks pretty simple, doesn't it? That will be all we need to mold and shape this into a 2 column layout.
Step 2.The HTML looks good but this is a CSS tutorial so now is the time to start adding some. It is generally good practice to start with your body tags at a margin and padding of 0, this ensures that your site fits the window with as much space as possible (no gaps) and it gives you a good idea of what you are working with even if you want to adjust that later. So start here:
Again, not too complicated but it ensures that our content reaches the edges. Now we'll give our divs some life by adding background colours to them all so that we can see what they are all doing. We can remove the colours later but it really helps in seeing exactly where things line up if they aren't all white.
Step 3.It's starting to look very colourful but it's still very vertical as well, so let's get things lining up side by side. First, we set the main content div to a set width so that we can make it all look a little more presentable, and for the sake of being simple, we'll choose 800 pixels. We'll also want to center it, to do that we use margin auto.
And now to draw that right side up beside the main column... to do that, we float the divs left and right. But to make sure that one doesn't get pushed down or that one doesn't squish the other, we have to do the math. The sum of both divs should not exceed the total width of the content div that contains them. In fact, I suggest giving some breathing room not just to make sure things work out, but also because it's just better visually. No one likes to see 2 bunches of text up against each other and this will give separation. I suggest a separation of about 15-25 pixels, so I'll use 575 and 200. You can use any numbers you like though.
Step 4.You'll notice that we get what we want and then some. The footer follows along since it figures it can it itself in to the right of all that text. If you've followed along with my tutorials, you may have read about a magical little feature called "clear:both". This effectivelly shuts off the float so that it knows to go under everything like it is supposed to.
Step 5.This is look great... we have actually already achieved our 2 column layout, but we need some finishing touches first to really make it what we want. First, let's fix that top menu by making it look less like a list and more like a menu, by putting the list elements in line (display: inline).
That looks better already, and now just a few finishing touches that should come as no big surprise to you by now.
These are simply font, margin and padding changes... nothing crazy done to any of it but I do want you to take note: the padding added to the main column and the padding added to the right side bar added up to close the gap between them. This is why we left room between the two earlier. There are other methods for making things fit properly and you can certainly play with the numbers in this example to get as much or as little of a gap as you like.
ConclusionEven if you were to type this all out (which you were, right?? Don't just copy and paste!!), it would take you 10-20 mins tops once you feel confident about this and know what you are doing. If you don't, once you have someone show you, it really shouldn't take too much longer... just add a little time for number adjustments and such. Really, this is so easy and straight forward that you should have no problem applying this to a lot of future CSS work. As you learn more in future tutorials or on your own, you can really start to spruce this up and make some very interesting layouts. Check this one out, it's the same as above but the widths are dynamic (percentages). Feel free to resize your browser a bit.... naturally, you can stretch or squish it to extremes to "break" it but again, there are ways to prevent that! Keep experimenting, we're getting there! |
|||||||||
| Last Updated on Tuesday, 10 November 2009 23:50 |
