header/3 column layout woes

**krayziepjf** · Sep 25, 2003 20:19

I am trying for this type of layout:

PHP Code:


------------------------------------
|     |          HEADER      |     |
|     |----------------------|     |
|     |                      |     |
|     |                      |     |
|     |                      |     |
|     |                      |     |
|     |                      |     |
|     |                      |     |
|     |                      |     |
|     |                      |     |
|     |----------------------|     |
|     |          FOOTER      |     |
------------------------------------

So, the two columns on the right and left are about 15% wide, then there is the general content are in the middle which is 70% wide. In there, I want a header area and a footer area, between the 2 columns on the right and left. However, if the content in the middle does not span the entire length of the page so that the footer is at the bottom, I want the footer to be at the bottom of the users browser.

So far I have this css:

Code:

 
body {background-color: #EFEFEF;}
#header, #footer {
 text-align: center;
}
#header {
 height: 100px;
}
div.small {
		width:10.2em;
		position:absolute;
		top:0;
		font-size:80%;
		padding-left:1%;
		padding-right:1%;
		margin-left:0;
		margin-right:0;
}
#main {
		margin-left:10.2em;
		margin-right:10.2em;
		padding-left:1em;
		padding-right:1em;
}
#left {
		left:0;
}
#right {
		right:0;
}

And this html code:

Code:

<html>
 <head>
  <title>parrish.krayzieland.com v2</title>
  <link rel=stylesheet type='text/css' href="css/style.css">
  <script type='text/javascript' src="js/x.js"></script>
 </head>
 
 <body>
  <div id='header'>
   <img src="images/header.jpg" border='0'>
  </div>
  
  <div id='left' class='small'>
   left
  </div>
  
  <div id='main'>
   center
  </div>
  
  <div id='right' class='small'>
   right
  </div>
 </body>
</html>

I don't think I have enough to make this work. I'm not sure how to get the footer into this, and make sure its at the bottom of the screen if the content doesn't push it there.

Please help?

**Fire59** · Sep 25, 2003 20:28

look at mine link

**krayziepjf** · Sep 25, 2003 20:37

Close, but not quite what I'm looking for. I don't want the footer to expand across the left and right columns. I want the header, content and footer contained within the left and right columns, and the footer always at the bottom.

**Fire59** · Sep 25, 2003 20:54

look at it again. I think that's what you want. The header is not line up. Can someone else help.

**krayziepjf** · Sep 25, 2003 20:58

Closer. Now I how do I get the yellow down to the bottom of the page?

**Fire59** · Sep 25, 2003 21:06

got it to look how you want, but doesn't render correctly in moz. look again.

**krayziepjf** · Sep 25, 2003 21:08

In IE6 the footer doesn't go to the bottom of the page.

**Travis** · Sep 26, 2003 05:41

Of course it doesn't, there is no good way to make it do so either. I suggest that you go back to tables if you just want to try and emulate them with CSS-P. However, try making the tables XHTML 1.0 Strict.

**krayziepjf** · Sep 26, 2003 06:52

In retrospect, the solution that Fire59 gave me is the best. It's css savy and doesn't use tables. That was my point in this, not to use tables. I was just seeing if there was a way to do it with only css.

Travis, what do you mean by XHTML 1.0 Strict?

**Travis** · Sep 26, 2003 13:10

You mean you use CSS and don't validate? http://validator.w3.org

**krayziepjf** · Sep 26, 2003 13:14

I do now. :-)

User Tag List

Thread: header/3 column layout woes

Thread Tools

Display

header/3 column layout woes

Bookmarks

Bookmarks

Posting Permissions