3 Col with Header and Footer (Fixed Width)

**Beeper** · Oct 13, 2004 05:07

Can anyone point me to a 3 column with header and footer that is fixed width. I can find loads that scale the central column. But I want to have the layout of a fixed size (760 px). Obviously it would be nice if it would scale smaller to a min width of 600px but that is not essential.

Any help would be appreciated. I have a vague idea I could whack a equalising 3col into an encloser div but this seems ridiculous to have all the functionality for scalling and then not to scale

**rbutler** · Oct 13, 2004 06:27

Look at the very top post in this forum, the sticky by Paul. It will help you get started. Then we can help with little problems down the road, lol, I should say Paul.

**Beeper** · Oct 13, 2004 08:08

OK, I went through that and makaged to hack something together that works in IE and Firefox. But now I have some further issues.

A scrolling section that has to determine its length and whether to scroll and a footer that should stay at the bottom of the page unless it would cover other content....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TEST</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #000000;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #000000;
}
a:visited {
	color: #333333;
}
a:hover {
	color: #666666;
}
a:active {
	color: #666666;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}
h1 {
	font-size: 12px;
	color: #000000;
}
h2 {
	font-size: 11px;
	color: #000000;
}
h3 {
	font-size: 10px;
	color: #000000;
}
#banner {
	margin: 0px;
	padding: 0px;
	clear: both;
	height: 40px;
	width: 760px;
	background-color: #66CCFF;
}
#header {
	margin: 0px;
	padding: 0px;
	clear: both;
	height: 100px;
	width: 760px;
	background-color: #CCCCCC;
}
#columnwrap {
	margin: 0px;
	padding: 0px;
	clear: both;
	width: 760px;
	border: 0;
	margin-top: 5px;
}
#footer {
	position: absolute;
	bottom: 0;
	margin: 0px;
	padding: 0px;
	clear: both;
	height: 10px;
	width: 568px;
	margin-left: 192px;
	background-color: #333333;
}
* html #footer {
	margin-left: 192px;
}
#menuCol {
	margin: 0px;
	padding: 0px;
	width: 186px;
	float: left;
	background-color: #999999;
}
#contentCol {
	margin: 0px;
	padding: 0px;
	width: 374px;
	margin-left: 192px;
	background-color: #00CCFF;
}
* html #contentCol {
	margin-left: 190px;
}
#advertCol {
	margin: 0px;
	padding: 0px;
	width: 186px;
	float: right;
	background-color: #666666;
}
#pageContent {
	margin: 0px;
	padding: 0px;
	width: 374px;
}
#articleGroup {
	margin: 0px;
	padding: 0px;
	width: 374px;
}
-->
</style></head>

<body>
<div id="banner">BANNER</div>
<div id="header">HEADER</div>
<div id="columnwrap"><div id="menuCol">
  <p>MENU</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div><div id="advertCol">
  <p>AD COLUMN</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div><div id="contentCol"><div id="pageContent"><p>CONTENT - NEEDS PAGE &amp; ARTICLE GROUP DIVS </p>
  <p>Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt velit esse cillum dolore lorem ipsum dolor sit amet. Cupidatat non proident, mollit anim id est laborum. Consectetur adipisicing elit, quis nostrud exercitation duis aute irure dolor. Ut aliquip ex ea commodo consequat.</p></div><hr><div id="articleGroup"><h1>This DIV 'articleGroup' to scroll when needed</h1><h2>Should extend to the bottom of the screen but not over the footer</h2>
<h3>The footer should sit at the bottom the screen but should also not encroach on the 'menuCol' or 'advertCol'</h3>
<p>So to recap this div should stretch to the bottom of the screen excluding the footer and scroll if content exceeds. The footer should remain at the bottom of the screen or be pushed off the screen by either the menuCol or advertCol depending on which is the longer. menuCol, advertCol and contentCol are all contained within columnwrap which may make this easier or harder. I am not sure. Any help would be greatly appreciated.</p>
</div>
</div></div>
<div id="footer">FOOTER SITS AT BOTTOM </div>
</body>
</html>

**Paul O'B** · Oct 13, 2004 08:55

Hi,

It seems to me that you are basically looking for this layout:

http://www.pmob.co.uk/temp/3colcentred_2a.htm

to achieve the footer at the bottom you need to read the FAQ on 100% height and there is also a thread on how to put a footer at the bottom.

The above example allows any column to be the longest and the footer will stay at the bottom of the window unless the document is longer, where it will sit at the bottom of the document.

You just have to be creative with the background images that create the column colours and you can provide the white space that you require.

It would probably be quicker for you to change my layout to suit rather than reprogram all of yours

If you still can't work it out then shout and I'll find some time to run through it.

Paul

**Beeper** · Oct 13, 2004 09:18

I can see that you might think thats the solution but...

My main problem is not the footer (at the moment

) but the auto scrolling #articleGroup div.

It needs to fill the length of the window from its starting point (which is fairly static) to just above the footer, lets say 20px, from the bottom.

Once I have that sorted I will worry about the damn footer... because I have a feeling that if we can get the content to work it will always push the footer to the bottom

**Paul O'B** · Oct 13, 2004 11:23

It needs to fill the length of the window from its starting point (which is fairly static) to just above the footer, lets say 20px, from the bottom.

Unless I'm misunderstanding you then I'm afraid its you that are not understanding the problem or the concept correctly

The page I linked to above is the answer and solution to your problem. The centre content (and side columns) extend from where they are down to the footer. This is exactly what you are asking for.

It needs to fill the length of the window from its starting point (which is fairly static) to just above the footer, lets say 20px, from the bottom

The fact that the footer is there makes no difference to the concept. The only way to do this in ie (other browsers are fairly easy to sort) is to use a 100% container and allow the background of the container be the background of the continuous columns (especially the centre content as in your case).

You want a continuos centre column that goes to the footer (or 20px from the footer). Well the only way to do it is to doit as shown in my example. As mentioned before you can make white space by putting large white borders on the footer, or by being creative with background images for the columns.

If you don't want the side columns full length then you just use the floated container themselves which have no height.

Read my FAQ on 100% height and the FAQ on putting a footer at the bottom and the examples in the three col demo thread and things should start to become clearer.
In ie you can't specify an element to start at xxpx down from the top and xxpx up from the bottom so you have to use other mechanisms such as the 100% height to base your measurements on. 100% only works from the whole window length ttherefore you cannot put an element half way down the page and then specify 100% as it will the go 100% from where it is.

In the link I gave to you above you merely have to put a large white border on the top of the footer and change the dimensions accordingly to get the layout you want.

If that still doesn't do it for you I'll add the necessary code to your layout

Paul

**Beeper** · Oct 14, 2004 07:50

Paul,

You helped me build this : http://www.phoenixlondon.co.uk/clien.../jakepolonsky/

As you can see, especially in the CV section, it has a central area that scrolls when required.

I am really looking for similar functionality but I don't really understand why I needed centre and innercentre.

If you could just explain to me exactly what you did here and why... I am sure I can figure out this problem (not the footer) myself.

Best regards

(I REALLY REALLY REALLY APPRECIATE ALL YOUR HELP AND HOPE I DO NOT COME ACROSS TOO UNGRATEFUL AS IT IS NOT MY INTENTION)

**Paul O'B** · Oct 14, 2004 09:30

Hi,

I think I know what you are looking for now

Something like this:

http://www.pmob.co.uk/temp/spointquiza.htm

If thats what you want then the explanation is in this quiz thread that I set.

http://www.sitepoint.com/forums/show...est+css+skills

If thats the sort of thing you are looking for then its not easily achievable in ie because it doesn't understand how to position a layout using top bottom left and right at the same time. IE needs width and height. Therefore you have to supply 2 sets of code. One for good browsers and one for ie which must be in quirks mode.

If you can't work it out then I'll take another look later but I'm out until later this evening so leave another message and I'll take a look

Paul

**Beeper** · Oct 14, 2004 10:35

Excellent.

Now I guess because my design is fairly static I am going to able to figure this one out over the course of a day or two.

Effectively I am going to have to absolutely position things. I am sure I will need your help when the pagecontent div starts having variable content in it.

I am beginning to hate designers....

Is Explorer always going to be rogue like this because its very very very (ad finitum) tiresome to keep hacking away....

Thank you for all your assistance... much appreciated

User Tag List

Thread: 3 Col with Header and Footer (Fixed Width)

Thread Tools

Display

3 Col with Header and Footer (Fixed Width)

Where's Paul when you need him :)

Very nice but...

Now I am confused...

Ok :)

Bookmarks

Bookmarks

Posting Permissions