Centered Website With Two Columns CSS

rvovk · August 3, 2005

This is upgrade of my first tutorial for Centered website with fixed width. Today I am going to present you tutorial for making two columns website with fixed width. My basic tutorial can be found here: here.

So let's begin:

First we will change CSS file, everything stays same if not mentioned to change, starting with color of content from basic tutorial, change background to this code. This will actually be background of left column and padding will be set to 0, cause it will be defined in Left and Right column. New code for Content:

#Content{  width:750px;	background:#BEB8B8;	margin:0;	padding:0;}

Oki. Next thing that we will do is definition of Left column. We will float it to left. Float means there is still space on opposite side.

In our case this is 750px 150px = 600px of free space on opposite side. Will be needed for Right column.

It will be 150 pixels of width. Height will depend on left or right column, so there is no need to define this. Color for Left column is defined in Content, so here we use code: background: none; . Padding is taken from first tutorial and it is same as it was before for Content:

Code for Left Column:

#Left{	float:left;  width:150px;	background:none;	margin:0px;	padding:10px 0px 0px 0px;}

Now we will define Right column. Width will be by calculation 600px. Padding same as for Left column. No big fuss at all. It is floated to right with code: float:right; . Color of Right column is defined in this properties.

Code for Right column is:

#Right{	float:right;  width:600px;	background:#D0C9C9;	margin:0px;	padding:10px 0px 0px 0px;}

Next thing that we need is named CLEAR FLOAT. This is a hack actually. There are many version of it over the net. I have started to use this one, which gives me best result in every browser. What this hack does? Float makes your site to collapse if you woudn't use this hack. I removed Left column here for better representation of this collapse. We see that footer has gone up to the header like there wasn't any Content (due to float property).

Posted Image

So basicly what we do is:

1. Floatcontainer is container that will prevent collapse.

2. Left coloumn text inside end of Left column.

3. Right coloumn text inside end of Right column.

4. end of Floatcontainer column.

Here is code for HTML file, take a look how is content built now. But firstly remember my 1,2,3,4 points that are explained in a paragraph before:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;<html><head><title>Centered website with two columns.</title><meta http-equiv="content-type" content="text/html;charset=windows-1250"/><style type="text/css" media="all">@import "layout12.css";</style></head><body><div id="Wrapper"><div id="Header"><p class="text">Header</p></div><!--Header--><div id="Content"><div class="floatcontainer"><div id="Left"><p class="text">Link 1</p><p class="text">Link 2</p><p class="text">Link 3</p><p class="text">Link 4</p><p class="text">Link 5</p><p class="text">Link 6</p></div><!--Left--><div id="Right"><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p></div><!--Right--></div><!--Float--></div><!--Content--><div id="Footer"><p class="text">Footer</p></div><!--Footer--></div><!--Wrapper--></body></html>

Working example and source available: here.

CSS file is available: here.

Any suggestions to make this script better is welcome. Script is checked in Firefox, Opera and Internet Explorer. Enjoy.

Robert

biscuitrat · August 3, 2005

Very nicely done! Be sure to build off of this for other CSS tutorials if you make any

rvovk · August 3, 2005

Sure, that was idea in the first place. I am glad you like it.

FLaKes · August 3, 2005

Thank you, Thank you soooo much..! I had been lookin for something like this for quite a while but I somehow couldnt find it, and when I did it on trial and error and could not get it to work I would get all frustrated. It was worse when I would preview it on the internet explorer and it would look fine, but when I checked it on firefox the left columns background would appear until the text or content ended. Though I did find some other solutions none where as good as this one. So muchas gracias for this tutorial.

rvovk · August 4, 2005

Flakes gave me few thoughts to think over. First solution would give us problem if right column became smaller than left column. So what will do is draw repeater image in Photoshop with 150px Left column of BEB8B8 color, and 600px Right column of D0C9C9 color.

This looks like this:

Posted Image

This will give us repeated background in whole content. We must link this image to Content background, so replace this code for Content:

#Content{  width:750px;	background:url(repeater.jpg) repeat-y;	margin:0;	padding:0;}

We must define new background for Right column, so we define background:none. Code is:

#Right{	float:right;  width:600px;	background:none;	margin:0px;	padding:10px 0px 0px 0px;}

New fixed CSS file is available: here.

New fixed site is available: here.

If there would be change in width of Left or Right column, them we must change background repeater image in photoshop to desired width and color.

Robert

Becca · August 4, 2005

Whats the different between using tables? Because it can be a fixed with aswell and have two columns.Anyways good simple-to-follow tutorial : well done.

rvovk · August 4, 2005

Becca, to be honest I don't know. It is this thing, when you start doing one thing and you learn alot, then you just keep doing and upgrading on this one. I guess tables are popular if you are doing "tables", like if you were working in Excel with lot of data. CSS is used if you wanna have grapchical approach, you do layout in Photoshop, slice it up to Header, Content which is repeated and Footer.

biscuitrat · August 4, 2005

I just prefer div layers to tables now, I guess. It's not like you can't use tables ever again - it's just a better way to go about inserting content.

Saint_Michael · August 5, 2005

i have to agree doing div tags has alot more customization to it then regular tables, but yeah you can do alot with justa simple layout like rvovk just proved.

BlaqueMajik · August 5, 2005

Nice tutorial, I will have to implement this into my new website maybe. I am not a big buff of much css though. I usually just use tables with repeating backgrounds.You and a bunch of other people should really think of submitting some of you tutorials to like Pixel2life or some place like that.

Tyssen · August 5, 2005

Whats the different between using tables?

The difference is that <div>s are used to display 'divisions' of content and tables are used to present tabular data. So when people started using tables for layout and presentation, they were using them for a purpose they were never intended. Semantically speaking (and according to the guidelines set down by the W3C), tables should only be used to display tabular data (the sort of data that would be held in a database - rows and columns).
Tables also aren't as search engine friendly, nor are they as easy to use for people with disabilities (e.g. people using screen readers).

Saint_Michael · August 5, 2005

yeah pixel2life is good place to have your tutorial placed at but you got alot of compitition there to deal with and also they do alot of deleting of tutorials too.

rvovk · August 5, 2005

I will stay loyal to Xisto even tho I also have hosting at Xisto - Web Hosting.com. This is a place I like to stay

Sign In

Centered Website With Two Columns CSS

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information