Hi Paul,
I like your design, I might use it on my webpage. So thank you.
weldon
Paul,
You really should become a CSS Consultant (is there any CSS issue this man can’t solve?!).
Anyway Paul, I don’t need your assistance (this time) just wanted to say thanx for your great work in developing these sample templates. I have utilised and modified one of them in the redevelopment of a website - http://www.psmprogram.sa.gov.au/
PS - It hasn’t been tested in anything beyond IE or Mozilla, not that I’m too fussed about the rest 
Cheers, Merry Xmas, Happy New Year, etc
Rob
Hi Rob,
Thanks for the compliments and good work on the site 
Merry Xmas to you also 
Paul
Hi, I have a problem with this layout and haven’t found a solution in this forum.
If you dont set the DOCTYPE like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
…then Internet Explorer 6 shows a space at the bottom of the page where the center content area and laterals show through. It also causes a problem with the header and laterals. Is there any way around this? If not I need to find another layout. 
Hi, I have a problem with this layout and haven’t found a solution in this forum.
If you dont set the DOCTYPE like this:
Sorry I don’t mean to be rude but what on earth are you talking about :).
What layout are you referring to and why on earth don’t you want a doctype?
If you want to write invalid code then go ahead but as far as I’m concerned every page should have a valid doctype with uri unless you want to force quirks mode for some reason. (In those cases you can use an html 4.01 doctype without uri, comments above the doctype or no doctype at all).
If you are referring to my demos then they all use valid code. If you want to run in quirks mode with a partial doctype then you just need to address the quirksmode issues such as the broken box model and other legacy behaviours. My layouts will work in quirksmode with the correct adjustments.
You really need to be more specific with your questions before we can help
Paul
Paul,
I am referring to the css layout you posted that started this discussion (3 equalizing col layout +header +footer). This layout works well with this doctype:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
It does not work so well with this doctype:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//ES”>
I am working on an intranet that already uses the latter doctype and wanted to make your layout work well with it since it currently does not. (Applicable to IE6).
Mark
Hi Mark,
The layouts will work on quirks mode which the doctype you mention above but they just need to address the issues that quirksmode presents.
Heres a basic example using the html 4.01 doctype without uri (as you mention above).
http://www.pmob.co.uk/temp/mac3column.htm
This example even works in ie5.1 mac.
Paul
Perfect, thanks very much. Now I have my layout.
Saludos,
Mark
Thanx Paul, this topic has learned me a whole lott about CSS layout.
I was just a little disapointed that the one I needed wasn’t among the examples.
I need a 2 col layout which is centered and has a footer at the bottom. So I need example one to be centered, like example 5. But I do need the left col to be the smaller one. Both exampels are different in the way they are created. I tried to build one my self with you tutorial but somehow there are some spooky pixels involved. (the different kinds of hacks get quite messed up)
I really appriciate if you made one extra example so i can study the (probably) silly difference.
Thanx.
Hi,
Heres a 2 column centred layout with equalising columns, 100% page height and footer at the bottom of the window or document if longer.
http://www.pmob.co.uk/temp/2_col_centred_imgbg.htm
Hope that helps.
Paul
Okay, first of all I am sorry not reading the total thread before posting… but it is quite large and must be good therefore - and it is
My problem is to get center column to ‘scroll’ under the footer and header.
I’ve done the three column design and used fixed header, footer and left/right column for the browser that support (other then IE). Now, I have a problem when viewing the page and scrolling = the mid column content doesn’t scroll behind (invisible) the header. I have rescued it with some dirty graphic tricks, but you still see the problem with greater resolutions like (1280*1024).
http://www.shiatsu.fi/suomenshiatsukoulu.html
Have someone a ‘ready to use’ solution for this issue? Thanks,
Sami
P.S. The general contest is there in an easier language for most of you
Hi,
Sounds like a simple z-index unless I’ve got the wrong end of the stick.
Add this bit in bold.
/* Position 'fixed' hidden from IE6 */
body>#navLeft, body>#logo, body>#topBox, body>#navRight, body>#highArt, body>#topContent, body>#footer, body>#backCenter, body>#news, body>#valid, body>#logo, body>#lang {
position: fixed;[b]z-index:200;background:#063;
[/b] }
You might be interested in these experimental layouts for position:fixed in IE.
http://www.pmob.co.uk/temp/fixedlayoutexample2.htm
http://www.pmob.co.uk/temp/fixedlayoutexample3.htm
Paul
Thank you Paul!
Now, after some more modifications it looks just nice (for now). Still some minor problems and will look into them when I have more time for design again And YES, thanks for the tips on IE fix stuff.
I am still a bit confused why didn’t this work:
/* Z-indexing */
#logo {
z-index: 15;
}
#archive {
z-index: 12;
}
#topBox {
z-index: 11;
}
#news {
z-index: 10;
}
#navLeft {
z-index: 9;
}
#highArt {
z-index: 8;
}
#emptyPosition {
z-index: 7;
}
#navRight {
z-index: 6;
}
#footer {
z-index: 5;
}
#backCenter {
z-index: 3;
}
.hierojaPic {
z-index: 2;
}
.content {
z-index: 1;
}
?
Thanks again,
Sami
Hi,
Without going back and checking the code I can tell you that z-indexing is relative to each nesting and its the parent of the nested elements that dictate whether they will overlap other elements outside the nested elements.
Elements in the same stacking context (nesting) observe the z-index as expected however they will only overlap elements outside the nesting if the main parent has the highest z-index.
I expect you have some elements nested and some not nested so you need to address the main parent to determine the stacking context.
Paul
OK, thanks again for a good answer. Of course, I didn’t expect you to sort out my code, but just give a general explanation as you did. Thanks, I will look in to that too when I find the time.
Sami
Wow! Really Great Thread here
I would like to know more about the 3 columns format. Looking at
the sample in Paul O B’s first post, it seems the center (content)
column is big enough that I can place 2 or 3 small columns inside
this big center column, like columns in a newspaper or newsletter.
Is there any problem for browsers, and do I use float or relative layers
for these smaller columns?
I’m kinda new to css.
Thanks,
John
Hi John,
Glad you found the thread interesting
You can put more floats in the middle column although you wouldn’t be able to have full height columns unless you did something like this with bg images:
http://www.pmob.co.uk/temp/4colfixedtest_5.htm
Except you’d put the bg images in #outer so that they appear in the centre column.
If you are floating more content in the middle then you may need to wrrap all the middle content in one big float first so that when you use clear:both firefox 1.0 doesn’t clear the side columns.
The other problem will be IE’s float drop at small screen sizes. IE has the habit of dropping floats down when there is no room even when there is nowhere else for it to go it still drops the float. If this happens then you may have to resort to scripting a min-width for ie (or expression).
Paul
Hi,
I read the thread and tried to make the three col. in the same way without the bg image.
http://www.alltravelconsultancy.com/blogtest1.html and see that the left and right col. is only a small part.
I want to make it look like this page. The blue col. I want to see all over the length of the page + in the footer I want to put the small blocks as in the header.
Hope you can help me.
HI,
You are nearly there You have to remember that the side column colurs are the background colour of the body which is why they have to be the same colour. The columns thenselves have no height it’s only the background that provides the illusion of height.
You must also use a full doctype otherwise the layout won’t work properly as it uses standards mode and the correct box model.
http://www.pmob.co.uk/temp/3coltemplate.htm
here are the changes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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">
/* mac hide \\*/
html, body { height: 100%; }
/* end hide*/
html, body{
padding: 0px;
margin: 0px;
background:#d6e7ff;
}
#outer {
height: 100%;
min-height: 100%;
margin-left: 150px;
margin-right: 150px;
background: #f7f7f7;
border: 0px;
}
html > body #outer { height: auto; }
#header{
margin-left:-150px;
margin-right:-150px;
min-height:120px;
background:#ccee77;
position:relative;
}
* html #header{height:120px;}
#left {
position:relative;/*ie needs this to show float */
width:150px;
float:left;
margin-left:-149px;/*must be 1px less than width otherwise won't push footer down */
left:1px;
}
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}
#right {
position:relative;/*ie needs this to show float */
width:150px;
float:right;
margin-right:-149px;/*must be 1px less than width otherwise won't push footer down */
right:1px;
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:0px;
border-bottom:0px;
background-color: #FF8080;
color: #000000;
text-align:center;
position:relative;
margin-top:-50px;
}
* html #footer {/*only ie gets this style*/
\\height:52px;/* for ie5 */
he\\ight:50px;/* for ie6 */
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
</style>
</head>
<body>
<div id="outer">
<div id="header">
<p>Header - Centre column longest - footer at bottom of document.</p>
</div>
<div id="left">
<p>Left Content goes here : </p>
</div>
<div id="right">
<p>Right content goes here : </p></div>
<div id="centrecontent">
<p>Centre Content goes here</p>
</div>
<div id="clearfooter"></div>
<!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer"> -Footer -</div>
</body>
</html>
Hope that helps.
Paul
Hey Paul,
I saw this - http://www.pmob.co.uk/temp/fixedlayoutexample2.htm - above and got all excited. I’ve been using the same kind of layout for my school’s site but the thing that bothers me about it is that it falls apart if IE isn’t in quirks mode. So, I checked your source and found… the same thing (the xml declaration at the top).
I don’t suppose you know any way to do this without using quirks mode? One reason I’d like to do this is that I wanted to reorganise the site with php to make it more consistent and easier to manage, but when I tried, I found that php doesn’t like that xml declaration - unless I misunderstood the error messages I was getting.
As always, thanks for your time.