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:
/* 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 */
[/edit]
Great, thanks.
Philippa
Sorry been out all day (as you may have guessed) I’ll have a look tomorrow for you.
Paul
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
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?
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:
<!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">
#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
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
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
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…
Hi,
Initially I thought that it would work but it seems theat fixe or absolute elements are removed from the flow and although the scrllbar appears at 800px the element keeps in going.
I think instead of a min-width script you may just have to set the left position of the element if < 0 etc.
I tried a few other things but the only one that was close was just setting the element a percetage width from the side but it just doesn’t scale correctly with the rest of the page. I don’t think this is a specific problem with my layout but a problem with centering absolute or fixed elements etc.
Paul
OK. I think I’ve got it sorted.
This seems to do the trick :
function fixMenu()
{
if (document.getElementById('side-bar'))
{
var html=document.documentElement;
var menu=document.getElementById('side-bar');
if (html.clientWidth<800)
{
menu.style.left=0;
menu.style.marginLeft=0;
}
else
{
menu.style.left="50%";
menu.style.marginLeft="-410px";
}
}
}
window.onload=function () {fixMenu();}
window.onresize=function () {fixMenu();}
I knew you could do it lol - I must start learning some js
Hi guys,
I’ve took a look at the code of 3 liquid colums layout simple. That’s perfect but I use another code to do the same. I will posted it here just to comment it with you. Since I think that in this forum there are people more experianced than me with CSS I want find pros and cons of my own code.
#ContainerHeader {
margin-bottom: 10px;
text-align:left;
}
#ContainerFooter {
margin-bottom: 10px;
}
#ContainerMaster {
position:relative;
width:100%;
text-align:left;
margin: auto;
}
#ContainerLeft {
position:absolute;
top:0;
left:0;
width:20%;
}
#ContainerCenter {
margin:0 21% 0 21%;
}
#ContainerRight {
position:absolute;
top:0;
right:0;
width:20%;
}
Hi Simon’s,
Your code will produce 3 liquid columns ok
In certain situations absolutely placed side columns will give a more solid behaviour than floats and avoid the float dropping of ie. However the main drawback to this method is that because the columns are absolutely placed then there is no way to have a footer span all three columns.
If the design doesn’t require this then the above method is fine and will work well. You can put a footer under the centre column as that is static but there will be no way to put a footer under all three columns unless you fix the height to set height (or script it) or keeptheside columns smaller than the center column.
This is the main drawback of your method and why floats are used for most other methods.
However, as mentioned above the absolute side columns do produce a more solid layout because you don’t get the float drop effect (in IE of course) that can mess floated layouts up.
Hope that all makes sense.
Paul
I see. I’ve noticed that footer did not go down (is this phrasal verb correct? 
) under all three columns. And I’ve also asked why. Now you tell me the reason. I will edit my code basing on your code as a pattern in order to have a footer span al three columns.
I hope that all is clear. Sometimes my english is down (my brain is always down :D)
I’m trying to create something like picture posted. There are four main containers: header, footer, right and middle one. Their positions belong follow your 3 liquid columns simple layout code. As you can see, I need to put other boxes in these main containers. Each box has the same properties: same margin, same width, etc…. So it is possible doing that with your code?
P.S.: light grey lines are the lines of structure and they are invisible
Hi,
You don’t really need code as complicated as mine if you don’t require the 100% height or the equalising columns. You van just use the basic 3 float technique as follows.
<!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>3 col layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
padding:0;
margin:0;
background:#fff;
color: #000;
}
#outer{
background:#F8E7EC;
border-left:1px solid #000;
border-right:1px solid #000;
color: #000;
background:pink;
}
#header{
height:70px;
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000000;
margin:0;
padding:0;
}
#left {
position:relative;
width:20%;
float:left;
background:orange;
}
#right {
position:relative;
width:19.9%;/*avoid rounding bug */
float:right;
background:orange;
}
.inner,.innerr{
width:97%;
border:1px solid #000;
background:silver;
margin-bottom:10px;
min-height:200px;
}
.innerr{float:right}
* html .inner, * html .innerr{height:200px}
#footer {
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\\height:52px;/* for ie5 */
he\\ight:50px;/* for ie6 */
}
#centrecontent {
width:60%;
float:left;
}
p {margin-top:0;padding-top:0}
</style>
</head>
<body>
<div id="outer">
<h1 id="header">Header</h1>
<div id="left">
<div class="inner">This is the inner</div>
<div class="inner">This is the inner</div>
</div>
<div id="centrecontent">
<p> centre content goes here : centre content goes here : centre content goes
here : centre content goes here : centre content goes here : centre content
goes here : centre content goes here : centre content goes here : centre
content goes here : centre content goes here : centre content goes here
: centre content goes here : centre content goes here : centre content goes
here : centre content goes here : centre content goes here : centre content
goes here : centre content goes here : centre content goes here : centre
content goes here : centre content goes here : </p>
</div>
<div id="right">
<div class="innerr">This is the inner</div>
<div class="innerr">This is the inner</div>
</div>
<div id="footer">Footer </div>
</div>
</body>
</html>
With fluid sides you will have to make sure that you don’t put large images in the columns as this will stop them contracting and then the floats may drop below in ie. Fluid columns like this are best for textual content and small images that can float around.
Paul
Amazing. Thank you. But setting the alignment of the right and left colums and using one inner class instead of two is not more quick than doing what have you wrote?
But setting the alignment of the right and left colums and using one inner class instead of two is not more quick than doing what have you wrote?
I think I understand what you are saying lol
The reason that I have defined left and right as columns and then placed an inner inside the column is to do with the way that floats will be cleared on the page. You can’t clear floats anymore withut them clearing everything else on the page (in firefox1.0). You need to contain the content in a float istelf which is why I have floated the whole left colmn and the whole right column.
You can place as many elements as you like in those columns (floated or not) and then you can clear them safely without clearing all the other content on the page.
Also if you float multiple items left and right without them being in a parent container you cannot get them to all be on one side or the other very easily as floats only float level and not level and then upwards.
The other issue is box model issues with padding and borders so you shouldn’t add padding to a percentage container because it will eventually be too big for its allocation at some stage.
Hope that all makes sense :).
Paul