3 Column Layout

  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Hey all,

I'm wanting to create a 3-column layout using CSS. The left and right columns should be fixed width. The center column should be fluid. I want it to be hack-free and work in all major browsers. Has anybody accomplished this or know how it's done?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

The world wide web consortium (w3c) has already done this for you. Study their source code and their site:

http://w3.org/
  • monoheinz
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

ATNO/TW wrote:
The world wide web consortium (w3c) has already done this for you. Study their source code and their site:

http://w3.org/

w3.org doesn't have two columns with fixed width, and one fluid ;)

An easy way to do this is to do something like this:
Code: [ Select ]
#left{
background-color:#0000ff;
width:200px;
height:400px;
float:left;
}

#right{
background-color:#00ff00;
height:400px;
width:200px;
float:right;
}

#center{
background-color:#ff0000;
height:400px;
width:100%;
}
  1. #left{
  2. background-color:#0000ff;
  3. width:200px;
  4. height:400px;
  5. float:left;
  6. }
  7. #right{
  8. background-color:#00ff00;
  9. height:400px;
  10. width:200px;
  11. float:right;
  12. }
  13. #center{
  14. background-color:#ff0000;
  15. height:400px;
  16. width:100%;
  17. }


Then you use the #center as a wrapper for the other two like this:
Code: [ Select ]
<div id="center">
<div id="left">Left Column</div>
<div id="right">Right Column</div>
<p>All your content goes here :)</p>
</div>
  1. <div id="center">
  2. <div id="left">Left Column</div>
  3. <div id="right">Right Column</div>
  4. <p>All your content goes here :)</p>
  5. </div>
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I know. but the "study" is important. You can use percentages for all, or used fixed widths for two and "*" for the third. It's the point that counts.

note: your example is "fixed" for all three and totals 1000px that would look pretty ugly at 800x600 (not that I pay much attention to that res.)

//edit --Strike that -- I see what you did now -- read it too fast a moment ago.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Proposing heights for the blocks is not useful, and widths are more versatile when suggested relative to the font size (unless the right and left columns contain images).

Do it as shown below. This will allow you to put borders on the middle column, if deemed useful.

Code: [ Select ]
#left {
background: #00F;
width: 25ex;
/* an 'ex' is equal to the height of lowercase
* letters, namely, lowercase 'x'.
*/

float: left;
}
#right {
background: #0F0;
width: 25ex;
float:right;
}
#middle {
margin-left: 27ex;
margin-right: 27ex;
/* these margins prevent text from flowing
* underneath sides.
*/
background: #F00;
}
  1. #left {
  2. background: #00F;
  3. width: 25ex;
  4. /* an 'ex' is equal to the height of lowercase
  5. * letters, namely, lowercase 'x'.
  6. */
  7. float: left;
  8. }
  9. #right {
  10. background: #0F0;
  11. width: 25ex;
  12. float:right;
  13. }
  14. #middle {
  15. margin-left: 27ex;
  16. margin-right: 27ex;
  17. /* these margins prevent text from flowing
  18. * underneath sides.
  19. */
  20. background: #F00;
  21. }


And the HTML is a bit different and more intuitive:

Code: [ Select ]
<div id="left">...</div>
<div id="right">...</div>
<div id="middle">...</div>
  1. <div id="left">...</div>
  2. <div id="right">...</div>
  3. <div id="middle">...</div>
  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Thanks Sam.

Your idea seems to fit my needs best.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 46 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.