Creating three column layout with CSS

**Yeavis** · Jun 13, 2003, 07:40

Hello,
Can someone please help me figure out how to code a simple three column based layout with CSS? I've been attempting to do this for a couple days now (yes I'm new to most of this, but not stupid), and I have only been able to make small adjustments to my layout.

This is what I'm looking for.

Code:

______________
|                          |
|                          |
|---------------------|
|        |                 |
|        |                 |
|        |                 |
|        |                 |
-----------------------

I would like to have the whole thing 760px wide, have the header be 100px tall, and the left navigation area to be 150px wide.
If anyone can help me with this it would be greatly appreciated.

Jason Baker
www.potatopimps.com

**TheOriginalH** · Jun 13, 2003, 07:45

I've added "code" tags to your post so it looks a little better

.

Could you show us what you've got so far Jason? It would be far better to show you where you've gone wrong than just "give" a solution....

**TheOriginalH** · Jun 13, 2003, 07:50

You may want to examine these

:

http://bluerobot.com/web/layouts/layout3.html

http://www.glish.com/css/7.asp

http://www.glish.com/css/2.asp

http://www.positioniseverything.net/ordered-floats.html

**Yeavis** · Jun 13, 2003, 07:54

Thanks for fixing my layout. Everything I have done (not much) is at www.potatopimps.com. Any ideas on what I'm doing wrong would be appreciated.

**garlinto** · Jun 13, 2003, 09:42

Originally Posted by Yeavis

Any ideas on what I'm doing wrong would be appreciated.

I guess I'm not sure what is "wrong". In viewing your mark-up, I see that you aren't using a third column, nor does your css call for one. So what do you mean by "3-column layout", and what exactly is wrong?

What are you trying to achieve?

**Yeavis** · Jun 13, 2003, 16:27

top, left, right.
Header, Navigation, Content. Header being on the top, navigation being underneath the header to the left, and content being to the right of navigation. Understand? I'm not sure what I'm doing wrong, maybe I'm missunderstanding this whole CSS stuff.

**vgarcia** · Jun 13, 2003, 16:38

3 columns would be left, center, and right.

Your navigation is top, left, right. Here's a proposed fix:
CSS:

Code:

#top {
  height: 40px;
}
#left {
  width: 20%;
  float: left;  
}
#right {
  width: 80%;
  float: left;
}

HTML:

HTML Code:

<body>
  <div id="top">
     <p>Top header</p>
  </div>
  <div id="left">
     <p>Left navigation</p>
  </div>
  <div id="right">
     <p>Content goes here!</p>
   </div>
</body>

That's the basics of it. Add CSS properties and markup as you wish.

**Yeavis** · Jun 13, 2003, 17:19

What about if I wanted to have a fixed width site. For example, right now the site is set as 760px wide. I want the left nav to be 150px wide, and the content portion to be 610px wide. I'm not wanting to use %'s because they look weird.

**Yeavis** · Jun 13, 2003, 17:23

go to this page: http://www.potatopimps.com/home/index_new.asp

**vgarcia** · Jun 13, 2003, 17:34

Originally Posted by Yeavis

What about if I wanted to have a fixed width site. For example, right now the site is set as 760px wide. I want the left nav to be 150px wide, and the content portion to be 610px wide. I'm not wanting to use %'s because they look weird.

Try this CSS instead:

Code:

#top { 
width: 760px;
height: 40px; 
} 
#left { 
width: 150px; 
float: left; 
} 
#right { 
width: 610px; 
float: left; 
}

**Yeavis** · Jun 13, 2003, 17:35

Thanks for all your help. I know this is stupid basic stuff, but I just couldn't get it to work. However, now it seems to be working just fine. Thanks again..

**Yeavis** · Jun 14, 2003, 16:53

Here's another question for you. How can I vertically align text inside a box? If you go to the same webpage as before, you'll see a couple boxes that are aligned to the top. I would like the box that says (125X125) to automatically adjust to center from the top. Any help would be greatly appreciated.

**earther** · Jun 14, 2003, 21:49

Originally Posted by Yeavis

Thanks for all your help. I know this is stupid basic stuff, but I just couldn't get it to work. However, now it seems to be working just fine. Thanks again..

Unfortunately, the layout is breaking at 800 x 600. (The attachment will eventually appear.) CSS just doesn't have the same fluidity as tables. I keep beating my head against it too. You have my sympathy.

**Yeavis** · Jun 15, 2003, 04:53

How can I center the whole page without messing up the layout? I've tried using {margin:0px auto;} but it screws everything up. Any suggestions would be appreciated.

**earther** · Jun 15, 2003, 08:48

Originally Posted by Yeavis

How can I center the whole page without messing up the layout? I've tried using {margin:0px auto;} but it screws everything up. Any suggestions would be appreciated.

Set your widths in percentages for starts. Just checked it and at full resolution it's OK but if the window is resized it still breaks. The only way I found I could get everything to stay in the right place was to do everything in absolute pixels. It's not flexible (scrollbar) but it always is in place. BTW the 'about us' link at the top isn't positioning correctly either.

**Yeavis** · Jun 15, 2003, 19:50

Okay, I've made some changes to it and it doesn't break anymore. I don't think that the "about us" link will be out of wack anymore, but I only have a few browsers to check it with.

**stationmaster** · Jun 17, 2003, 00:09

here's a little something to help you float center.

Code:

body
{   margin: 0;
    padding: 0px;
    background-color: #dcdcdc;
    /*background-image: url(../media/back_tile.gif);*/
	font-size: 100% ;
	font-family: arial, helvetica, sans-serif;
	text-align:center;
}

#frame {
    background-color: #c0c0c0;
	margin-top:20px;
	margin-bottom:20px;
	margin-right: auto;
	margin-left: auto;
	text-align: left; /* Overrides inherited centered value from body */
	width: 750px;
	}

I hope that makes sence, and will help to float.
I don't much like designs glued to the top left of the window.
You need to put all your content inside of a div with id="frame"

**earther** · Jun 17, 2003, 09:52

Originally Posted by Yeavis

Okay, I've made some changes to it and it doesn't break anymore. I don't think that the "about us" link will be out of wack anymore, but I only have a few browsers to check it with.

Yes, everything is looking fine now. Congrats!

The SitePoint Forums have moved.

User Tag List

Thread: Creating three column layout with CSS

Thread Tools

Display

Creating three column layout with CSS

float center

Bookmarks

Bookmarks

Posting Permissions