how do i make a 3 colom layout. using div’s and css style. with a centered middle colum of a fixed with of 800px and the left and right collumns filling the space on left and right.
Next, I hacked together a little code for you (I’ve been working on something similar, yet a little more complex.) I commented generously and made it as straightforward as possible. Although, as I’ve found with CSS, once you start monkeying around with things, the whole design can go haywire.
Basically, you make a wrapper div (100% width) to hold three column divs. Then you float one left, one right, and center the middle one with the following code:
margin: 0 auto;
There is a little hack for some versions of IE that don’t support that, and I’ve included it. Feel free to use it as you wish.
The question of finding good 3 column layouts comes up in the mail list from time to time. Here are some that I have found, along with a few notations about what features they include and how they work. The judgment of “good” is left to you and your needs. Each offers interesting techniques for the CSS student. By the way, when visiting these, look around; many of these people offer other layouts that I have not included here. I’m sure there are more that I have missed. Add the others you know, or mail me and I’ll add them. Of course, don’t hesitate to mail me about any errors or misrepresentations I’ve made.
I recently was surfing the web and found myself on a popular web standards zealot website. The featured article referred to 3 column CSS based page layout as being the ‘Holy Grail’! My first reaction to this was: geez, how silly this is!
Indeed, a simple thing like a 3 column layout is a challenge – when you don’t use tables. As such, you can find many articles on many web standards zealot websites that attempt to solve this problem. All of them falling short, all of them requiring the use of hacks – hacks that can break and WILL break.