3 equalizing col layout +header +footer

**dreado** · Jan 25, 2005 12:49

Hi
I’m making a site based on this layout, see it here
As you can see I’ve tried to add a kind of border to the right hand side, but I need a better way to do it. At the moment it’s just a div set at 100% height, covering what’s bellow it. Problem is, when the content is larger than the screen height the border stops where the bottom of the screen was.

Is it possible to achieve the look I’m after?

**Paul O'B** · Jan 25, 2005 16:52

Hi,

I'm not sure if this will work but try it anyway

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>Micropistoff</title>
<style type="text/css">
/* CSS Document */
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
body {
 border-right:20px solid #1e77d3;
	padding:0;
 margin:0;
 background:#fff url(http://www.tomc.org.uk/micropistoff/bodybg.jpg) no-repeat left bottom;
 color: #000000;
}
html>body #blueborder{
 position:fixed;
 right:0;
 top:0;
 bottom:0;
 width: 20px;
 background:#1e77d3;
}
#outer{
 min-height:100%;
 margin-left:180px;
 margin-right:197px;
 background:#FFFFFF;
 border-left:1px solid #CCCCCC;
 border-right:1px solid #ccc;
 margin-bottom:-21px;
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
 
* html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
#outer h1 {
 font-family: Arial, Verdana, sans-serif;
 font-size: 16px;
 text-indent: 10px;
}
#outer h2 {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 text-indent: 10px;
}
#header{
 position:absolute;
 top:20px;
 left:0;
 width:100%;
 height:50px;
 background:#FFFFFF url(http://www.tomc.org.uk/micropistoff/headerbg.jpg) repeat-y;
 border-top:0px solid #1e77d3;
 border-bottom:1px solid #CCCCCC;
 overflow:hidden;
 color: #000000;
}
 #header h1 {
 font-size:24px;
 padding:10px 10px 0px 10px;
 margin:0px;
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-style: italic;
 font-weight: bold;
 color: #FFFFFF;
 vertical-align:middle;
  }
#preheader {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:20px;
 background:#4C92DA url(http://www.tomc.org.uk/micropistoff/bg.jpg) repeat-y right;
 overflow:hidden;
 text-align:right;
}
#preheader a:link {
 color: #FFFFFF;
 text-decoration: none;
}
#preheader a:visited {
 text-decoration: none;
 color: #FFFFFF;
}
#preheader a:hover {
 text-decoration: underline;
}
#preheader a:active {
 text-decoration: none;
}
#preheader a {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 margin-right: 20px;
 vertical-align: middle;
 line-height: 20px;
}
#left {
 position:relative;
 width:180px;
 float:left;
 margin-left:-179px;
 z-index:100;
 left:-1px;
 margin-top:72px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
* html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}
#right {
 position:relative;
 width:197px;
 float:right;
 margin-right:-196px;
 left:2px;
 margin-top:71px;
}
#footer {
 width:100%;
 clear:both;
 height:20px;
 border-top:1px solid #CCCCCC;
 border-bottom:0px solid #1e77d3;
 background-color: #4C92DA;
 color: #000000;
 position:relative;
 background-image: url(http://www.tomc.org.uk/micropistoff/bg.jpg);
 background-repeat: repeat-y;
 background-position: right;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 text-indent: 20px;
 line-height: 20px;
 vertical-align: middle;
}
* html #footer {/*only ie gets this style*/
 \height:22px;/* for ie5 */
 he\ight:20px;/* for ie6 */
}
#clearheader{height:80px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
div,p  {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
#centrecontent {position:relative;z-index:1}
#search {
 position:absolute;
 right: 30px;
 top: 25px;
 z-index: 5;
}
#search h1 {
 font-size:10px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding:0px 0px 0px 0px;
 font-weight: normal;
 margin:0px 0px 0px 0px;
}
* html #border{height:100%}
* html #border{margin-right: -1px}
#left h1 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 text-indent: 8px;
 }
#left h2 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 text-indent: 12px;
 font-weight: normal;
 text-decoration: none;
 }
#left a:hover {
 color: #000000;
 background: #CCCCCC;
 text-decoration: none;
}
#left a:link {
 color: #000000;
 text-decoration: none;
}
#left a:visited {
 text-decoration: none;
 color: #000000;
}
#footer a:link {
 color: #000000;
 text-decoration: none;
}
#footer a:visited {
 text-decoration: none;
 color: #000000;
}
#footer a:hover {
 text-decoration: underline;
 color: #000000;
}
#footer a:active {
 text-decoration: none;
 color: #000000;
}
#outer p {
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
  <div id="blueborder"></div>
<div id="outer"> 
<div id="left"> 
	<h1>Products</h1>
	<h2><a href="office.php">Office</a></h2>
	<h2><a href="mail.php">Mail</a></h2>
	<h2><a href="browsers.php">Browsers</a></h2>
	<h2><a href="players.php">Audio Players</a></h2>
	<h2>Rip and Burn</h2>
	<h2>Instant Messengers</h2>
	<h2>Anti Virus</h2>
	<h2>Anti Spyware</h2>
	<hr color="#CCCCCC" noshade size="1">
	<h1>Services</h1>
	<h2>Email</h2>
	<hr color="#CCCCCC" noshade size="1">
	<h2><a href="<A href="http://micropistoff.proboards36.com/">Forum</a></h2">http://micropistoff.proboards36.com/">Forum</a></h2>
	<hr color="#CCCCCC" noshade size="1">
  </div>
  <div id="right"><a href="http://www.spreadfirefox.com/?q=affi...45383&amp;t=45" target="_blank"><img src="http://www.tomc.org.uk/micropistoff/ff.jpg" alt="Get FireFox" border="0"></a></div>
  <div id="clearheader"></div>
  <!-- to clear header -->
  <div id="centrecontent"> 
	<h1>Welcome to Micropistoff</h1>
	<p>This is a site for Windows users who are looking for free alternatives 
	  to big company products.</p>
	<p>Whether you are looking to replace software that came with Windows, such 
	  as Windows Media Player, Internet Explorer, or Windows/MSN Messenger.</p>
	<p>Or you are looking for free alternatives to products like Microsoft Office.</p>
	<p>Or you just want some new, software for nothing. This is a good place to 
	  start.</p>
	<p>If you are asking yourself “Why would I want to give up my Microsoft stuff?” 
	  then you are probably in the wrong place. Chances are though, Microsoft 
	  have annoyed you at some point. I’m not going to reel off loads of reasons 
	  why the big M is evil, if you are still reading this then you probably already 
	  have your own reasons.</p>
	<p>For me, the final straw came when I had a problem with Internet Explorer 
	  and went to Microsoft.com looking for support. Turns out I would have had 
	  to pay £35.00 + VAT just for the privilege of emailing them. That’s when 
	  I decided to change my web browser from IE to FireFox. I find FireFox a 
	  much better product than IE, and there are lots of great products out there, 
	  its just a matter of finding them.</p>
	<p>That’s where I hope this site will come in, as at least a starting point 
	  to a world of alternatives, not just alternatives for the sake of avoiding 
	  Microsoft, but alternatives so you have a choice in what software you use. 
	  Making the most of this choice is what pushes software forward.</p>
	<p>In each section of the site there are various products, along with a little 
	  info based on the official site, a link to that site, and a user rating 
	  (which you can contribute to). 
	<p>Here is a guide to the ratings</p>
	<p>5 Excelent | 4 Very Good | 3 Fair | 2 Ok | 1 Poor | 0 Awful</p></p>
	</div>
  <div id="clearfooter"></div>
  <!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer">2005 <a href="http://samsmith.name/" target="_blank">Sam Smith</a> 
  | <a href="http://www.dreadodesign.com/" target="_blank">Dreado Design</a></div>
<div id="header"> 
  <h1>Micropistoff</h1>
</div>
<div id="preheader"></div>
<div id="search"> 
  <h1>Search Micropistoff</h1>
  <form action="http://pub19.bravenet.com/search2/search.php" method="post" style="margin:0px;">
	<input type="hidden"  style="border: 0px solid black; height: 0px; width: 0px;" name="usernum" value="1617624030" />
	<input type="hidden"  style="border: 0px solid black; height: 0px; width: 0px;" name="cpv" value="2" />
	<input name="keyword" type="text" size="30" />
	<input type="submit" value="Go" />
  </form>
</div>
</body>
</html>

If that doesn't work then you'll have to resort to usuing 2 bg images as in this example.:

http://www.pmob.co.uk/temp/3coltest-2.htm

Hope that helps.

Paul

**Paul O'B** · Jan 26, 2005 06:10

HI Bon Rouge,

I've had a look at your zip file and I spent a couple of hours on it but in the end I ran out of time.

So What I've done is changed my original demo to include the elements that you need. I 've tested this in ie5, ie5.5., ie6, firefox 1.0, opera7.5 and ie5.1 mac. They all look exactly the same (give or take a pixel or 2).

You should be able to drop your content into the containers. You can adjust their sizes but don't change the structure.

The problem you had with ie mac was that you used comments within the mac hiding hack which of course closed the hack prematurely

The mac hiding hack is controlled by the closing comments so if you add any comments in between the part you want to hide it closes the hack.

Sorry I couldn't do this for you but trying to work out your code and mine was taking too long. I hope that you can work with this without too much trouble. As i said this is working in all the browsers I mentioned above.

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

It has a fixed header and footer and a fixed left side-bar. There is a centre column and a right column and the whole thing is centred.

Hope thats ok and sorry I couldn't fix yours

Paul

**BonRouge** · Jan 26, 2005 11:32

Hey Paul,

Thanks a lot. I did what you said - tried to just drop my content in - and this is nearly perfect now (or how I want it to look at least. I've checked it in FF and IE6 (no problem), IE5.5 (good enough), IE5 and Opera (problems) - all in Windows.

In IE5, the title - which should be centred - is on the left, and my footer menu is all bunched together - there's no padding or whatever. It looks strange.

In Opera, the footer-menu doesn't appear. That's not good, because... well, it's the navigation.

Any ideas on how to fix these small things?

Overall though, it was a lot easier than when I tried to do this the other day. Thanks for all your hard work.

Cheers

**dreado** · Jan 26, 2005 11:46

Hi Paul, thanks for the help.
I tried the first way, but had the same problem. So I’m going to use the second way. I’ve tried it on this page, but the left background (bodybg.jpg) seems to have disappeared.
What have I done wrong?

Code:

/* CSS Document */

/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
html{background:#FFFFFF url(border.gif) repeat-y right top;}
body {
	padding:0;
	margin:0;
	background:#FFFFFF url(border.gif) repeat-y right top;
	color: #000000;
	height:100%;
}
#outer{
	min-height:100%;
	margin-left:180px;
	margin-right:217px;
	background:#transparent url(bodybg.jpg) no-repeat left bottom;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	margin-bottom:-20px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
 
* html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/

#outer h1 {
	font-family: Arial, Verdana, sans-serif;
	font-size: 16px;
	text-indent: 10px;
}
#outer h2 {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	text-indent: 10px;
}
#header{
	position:absolute;
	top:20px;
	left:0;
	width:100%;
	height:50px;
	background:#FFFFFF url(headerbg.jpg) repeat-y;
	border-top:0px solid #1e77d3;
	border-bottom:1px solid #CCCCCC;
	overflow:hidden;
	color: #000000;
}
	#header h1 {
	font-size:24px;
	padding:10px 10px 0px 10px;
	margin:0px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-style: italic;
	font-weight: bold;
	color: #FFFFFF;
	vertical-align:middle;
		}
#preheader {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:20px;
	background:#4C92DA url(bg.jpg) repeat-y right;
	overflow:hidden;
	text-align:right;
}
#preheader a:link {
	color: #FFFFFF;
	text-decoration: none;
}
#preheader a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
#preheader a:hover {
	text-decoration: underline;
}
#preheader a:active {
	text-decoration: none;
}
#preheader a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin-right: 20px;
	vertical-align: middle;
	line-height: 20px;
}
#left {
	position:relative;
	width:180px;
	float:left;
	margin-left:-179px;
	z-index:100;
	left:-1px;
	top:72px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
* html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}

#right {
	position:relative;
	width:197px;
	float:right;
	margin-right:-217px;
	left:1px;
	top:71px;
}

#footer {
	width:100%;
	clear:both;
	height:20px;
	border-top:0px solid #1e77d3;
	border-bottom:0px solid #1e77d3;
	background-color: #4C92DA;
	color: #000000;
	position:relative;
	background-image: url(bg.jpg);
	background-repeat: repeat-y;
	background-position: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-indent: 20px;
	line-height: 20px;
	vertical-align: middle;
}
* html #footer {/*only ie gets this style*/
	\height:22px;/* for ie5 */
	he\ight:20px;/* for ie6 */
}
#clearheader{height:80px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
div,p  {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
#centrecontent {position:relative;z-index:1}

#search {
	position:absolute;
	right: 30px;
	top: 25px;
	z-index: 5;
}

#search h1 {
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:0px 0px 0px 0px;
	font-weight: normal;
	margin:0px 0px 0px 0px;
}

#left h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-indent: 8px;
	}
#left h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-indent: 12px;
	font-weight: normal;
	text-decoration: none;
	}
#left a:hover {
	color: #000000;
	background: #CCCCCC;
	text-decoration: none;
}
#left a:link {
	color: #000000;
	text-decoration: none;
}
#left a:visited {
	text-decoration: none;
	color: #000000;
}
#footer a:link {
	color: #000000;
	text-decoration: none;
}
#footer a:visited {
	text-decoration: none;
	color: #000000;
}
#footer a:hover {
	text-decoration: underline;
	color: #000000;
}
#footer a:active {
	text-decoration: none;
	color: #000000;
}
#outer p {
margin-left:10px;
margin-right:10px;
}

**Paul O'B** · Jan 26, 2005 20:39

HI,

the left background (bodybg.jpg) seems to have disappeared

You left a # in front of transparent. You need to change it around anyway.
use this:

Code:

/* CSS Document */
html{background:#FFFFFF  url(http://www.tomc.org.uk/micropistoff/bodybg.jpg) no-repeat left bottom}
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
body {
 padding:0;
 margin:0;
 color: #000000;
 height:100%;
 background:transparent url(http://www.tomc.org.uk/micropistoff/border.gif) repeat-y right top;
}
#outer{
 ;
 min-height:100%;
 margin-left:180px;
 margin-right:217px;
 border-left:1px solid #CCCCCC;
 border-right:1px solid #CCCCCC;
 margin-bottom:-20px;
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
 
* html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
html>body #blueborder{
 position:fixed;
 right:0;
 top:0;
 bottom:0;
 width: 20px;
 background:#1e77d3;
}

html:

Code:

<body>
<div id="blueborder"></div>
<div id="outer"> 
  <div id="left">

That works in ie and moz.

Paul

**Paul O'B** · Jan 26, 2005 20:45

Hi Bon Rouge,

Sorry for the late reply but I've had people breathing down my neck all day

It looks ok in Opera 7.5 and ie5 now so I assume you've sorted it.

Hopefully I'll be back to normal next week

Paul

**Krieger** · Jan 26, 2005 22:35

Many moons back I built a site for some friends. The site was soooo bad that I decided to do a revision of it - well, the guts in any case. The old site was html and butchered css everywhere.....

I rebuilt the layout using a revised layout design of Paul's, and some of his css advice as well.

I'm happy to say that the new site prototype is now fully xhtml and css validated. I tweaked the design to allow placement of text and graphics in the header quite nicely, while not using a table (see note below).

Note: Yes, the main navigation bar is a table - anyone have a suggestion how to make the same type of nav bar using css?

Bear with the content - the site is for an online gaming team, but you can view it here.

Note that only the first five main nav bar links work since I am in the process of doing a complete refactor of the php engine in OOP. The first five links, however, will demonstrate that the footer rests at the bottom of the longest column when volume of content > view area, and at the bottom of the view area otherwise.

As before, thanks Paul.

Cheers

**BonRouge** · Jan 26, 2005 22:58

Paul,

I'm confused. I haven't fixed anything. When I look in Opera 7.54 and IE5, I still see those problems - the biggest one being that I don't see the menu in the footer.

Sorry to be one of those people breathing down your neck

Thanks as ever.

Cheers

**Paul O'B** · Jan 27, 2005 07:47

HI Bon Rouge,

I didn't notice the missing menu but this should fix opera7.5.

Code:

#footmenu {
 margin:0;
 width:770px;
 padding:0;
 position:absolute;
 left:50%;
 margin-left:-375px;
 bottom:-1px;
 height:10px;
 font-size:0.7em;
 font-weight:bold;
 font-family:Georgia, Times New Roman, Times, serif;
 z-index:4;
 text-align:center;
 background-image: url(http://cheers-sendai.com/_themes/rmnsque/romtextb.jpg);}
html>body #footmenu {
padding-bottom:2px;position:fixed;
}

It didn't seem to like the position absolute, so I made it fixed

Paul

**Paul O'B** · Jan 27, 2005 07:57

HI Bon rouge,

ie5 fix:

Code:

 * html #footmenu li a {width:1px;w\idth:auto}

html

Code:

<li id="fgen-info"><a href="gen-info.shtml">GENERAL&nbsp;INFO</a></li>

You need a non breaking space or ie5 drops to two lines.

Hope that helps.

Paul

**Paul O'B** · Jan 27, 2005 08:06

HI Krieger,

Looking Good.

Inline menus are difficult in css especially where theres no room for it to wrap. I dare say you could use percentages for each menu and float them but it would be tricky (especially with borders and things)

I did a couple of examples here of inline lists that you may be able to tweak but they are not a percentage width but content width.

http://www.pmob.co.uk/temp/hozinlinemenu.htm
http://www.pmob.co.uk/temp/hozinlinelist3.htm

Good work

Paul

Edit:

you can do something like this which works well in mozilla and not bad in ie6.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{
margin:0;
padding:0;
background:#000;
color:#fff;
}
ul{
margin:10px 0 0 0;
padding:0;
list-style:none;
width:100%;
white-space:nowrap;
height:30px;
overflow:hidden;
}
li{
float:left;
width:8.3%;/*100%/12 */
white-space:nowrap;
text-align:center;
line-height:25px;
}
a {
text-decoration:none;
display:block;
border:2px solid silver;
}
* html .last {margin-right:-1px}/* ipx jog */
</style>
</head>
<body>
<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li class="last"><a href="#">Testing</a></li>
</ul>
</body>
</html>

**BonRouge** · Jan 27, 2005 08:36

Paul,

Thanks again for your magic touch!

Now, I have a couple more small problems and then I promise I'll stop bugging you and do something useful like try and help other people...

In IE5, the logo at the top is left-aligned. How can I get that into the centre?
Also in IE5, one of my links in the right column is shorter than it should be (or maybe the font's bigger?) - the one in the yellow box that says '翻訳及び校正'. How can I fix this? (I don't really know much about these IE5 and Opera fixes).

Thanks again - I'd like to buy you a beer some day.

**Philippa Priddle** · Jan 27, 2005 12:51

Would it be possible to see the CSS for the '3 col centered' fixed layout, as I'm having great problems figuring it out.

Thanks for your help!
Philippa

**BonRouge** · Jan 27, 2005 12:57

Did you try 'view source' ?

**Philippa Priddle** · Jan 27, 2005 16:14

Yes, I did, but I was unable to view the CSS, as it resides in an external file.

Philippa

**Young Twig** · Jan 27, 2005 17:05

Originally Posted by Philippa Priddle

Yes, I did, but I was unable to view the CSS, as it resides in an external file.

Philippa

If you just go to the file, it will show the contents:
http://www.pmob.co.uk/temp/3colcentred_2.css

Edit:

If you use IE, it might make you download the square-filled crap. This is what it says:

Code:

/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
	padding:0;
	margin:0;
	text-align:center;
	min-width:760px;/* for mozilla*/
	background-color: #F2E3EE;
	color: #000000;
}
#outer{
	height:100%;
	min-height:100%;
	width:758px;
	border-left:1px solid #000;
	border-right:1px solid #000;
	color: #000000;
	text-align:left;
	margin:auto;
	position:relative;
	background:  url(images/centredbg.jpg) repeat-y center center;
	position:relative;
}
 
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#innerwrap {/* enables content first */
	float:left;
	width:626px;
}
#header{
	position:absolute;
	top:0;
	left:-1px;
	width:758px;
	height:70px;
	background:#FF0000;
	border:1px solid #000;
	overflow:hidden;
	color: #000000;
	z-index:100;
}
#left {
	position:relative;/*ie needs this to show float */
	width:120px;
	float:left;
	padding-top:72px;/*needed to make room for header*/
	padding-bottom:32px;/* needed to make room for footer */
}
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:4px;padding-right:2px}

#right {
	position:relative;/*ie needs this to show float */
	width:130px;
	float:right;
	padding-top:72px;/*needed to make room for header*/
	padding-bottom:32px;/* needed to make room for footer */
}

#footer {
	width:758px;
	clear:both;
	height:50px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	background-color: #FF8080;
	color: #000000;
	text-align:center;
	left:0;
	bottom:0;
	position: absolute;

}
* html #footer {/*only ie gets this style*/
	\height:52px;/* for ie5 */
	he\ight:50px;/* for ie6 */
}
div,p  {margin-top:0}/*clear top margin for mozilla*/
#centrecontent {
	width:498px;
	float:right;
	padding-top:72px;
	padding-bottom:32px;/* needed to make room for footer */
}
#centrecontent p {padding-left:3px}

#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */

**Philippa Priddle** · Jan 27, 2005 17:33

Great, thanks.

Philippa

**Paul O'B** · Jan 27, 2005 19:31

Originally Posted by bonrouge

have a couple more small problems and then I promise I'll stop bugging yo

Sorry been out all day (as you may have guessed) I'll have a look tomorrow for you.

Paul

**Paul O'B** · Jan 30, 2005 19:39

Hi Bon Rouge,

Sorry for the late reply. I had a look at the page and it looked like the easiest solution with that cheers image is to give it a left margin. The width is a fixed width and your side images are the same size so you could just give ie a left margin and be done with it.

Obviously if you are going to change the image then it may not be suitable. I had a few problems with ie5 when viewing your site (porobably because the language pack isn't installed) so I didn't really get a lot of testing done.

I should have a bit more time next week so I'll try again and sorry for the delay.

Paul

**BonRouge** · Jan 30, 2005 23:59

Hey Paul,

I tried a hack to target IE5 but it didn't seem to work. Maybe I did something wrong... Never mind though. I think I can live with this problem - I mean, IE5 - do many people actually use it?

**Paul O'B** · Jan 31, 2005 06:22

Hi,

Well ie5 is fading and if its only an alignment problem but syill usable then I wouldn't worry about it.

However if you want to target all three versions of ie then you can use this method that I use:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#elementname {color:yellow}
* html #elementname{color:red;voice-family: "\"}\""; voice-family:inherit;}/* for ie5*/
* html #elementname{color:blue;c\olor:green;}/* for ie5.5 and then ie6 - ie5 jumps this whole bloclk because of the voice family hack above*/
/* above 2 elements must remain together and only style things you don't want ie5 to see in the second style */
</style>
</head>
<body>
<p id="elementname">This text will be yellow in mozilla, and red in ie5 and blue in ie5.5. and green in ie6</p>
</body>
</html>

I'm sure you can work it out from there

Paul

**BonRouge** · Jan 31, 2005 08:06

Thanks Paul,

I've sorted that out now. IE5 is working OK, so that's good.
Now, I know I said I'd stop bugging you, but maybe this is more like feedback about your layout. I think it's great except for one thing - as you re-size the window horizontally - make it narrower - the side-bar keeps going and disappears off the page while everything else stays on the screen...

Any plans to improve on your layout?
As I said - I'm happy with what I have, but I'd be even happier if I didn't have that little problem.

Cheers

**Paul O'B** · Jan 31, 2005 10:50

Yes thats the only obstacle to overcome at the moment. I think you may have to resort to a min-width js script as I can't think of an easy way around it at the moment.

I've always disliked that centering technique using left:50% and margin-left:-xx etc as it doesn't stop centering once it reaches the left edge. The problem is that i couldn't use the usual method because the fixed menu needed to be offset first before being centred.

I will have to think about this as there probably is a way

Paul

**BonRouge** · Feb 1, 2005 00:18

Paul,
There's a minimum width set in the CSS now for the body. How come that doesn't stop the menu sliding off the page? I was going to put in some javascript to do that for IE, but then I realised that its already there in the CSS and in theory (or at least in my head) it should work for Firefox, but it doesn't...

User Tag List

Thread: 3 equalizing col layout +header +footer

Thread Tools

Display

Another examples of Paul's design in use....

Bookmarks

Bookmarks

Posting Permissions