But then later spotted it was for absolute positioned layouts which mine is not.
So my question is please…“How can I get all three columns equal length” ( I read the sticky post on three column layout but its such a departure from the way I’ve done mine I just cant use the solution)
The easiest way is just to make a background image with 3 column colors on it and then repeat it on your wrapper. In that way it will always stretch to 100%.
Alternatively without images use my overlay technique shown here.
Added to your code looks like this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" value="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="css/tutorial.css" />
<title>3 column layout tutorial</title>
<style type="text/css">
/* 1 column css*/
#container {
margin: 0 30px;
background: #fff;
}
#header {
background: #ccc;
padding: 20px;
}
#header h1 {
margin: 0;
}
#navigation {
float: left;
width: 100%;
background: #333;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style-type: none;
display: inline;
}
#navigation li a {
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover {
background: #383;
}
#content {
clear: left;
padding: 20px;
}
#content h2 {
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer {
background: #ccc;
text-align: right;
padding: 20px;
min-height:0;
}
* html #footer {
height:1%
}
/* 1 column css ends*/
/* 2 column css starts*/
#wrapper2column {
width:800px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
}
#leftcolumn {
float:left;
width:20%;
border: 3px solid black;
}
#maincontent {
border:5px solid red;
padding-left:160px;
}
body {
background:#000000;
}
#header2column {
border:5px solid green;
}
#footer2column {
border:5px solid yellow;
clear:both;
}
/* 2 column css ends*/
/* 3 column css starts*/
#tutorial {
background:orange url(http://www.pauserefreshment.co.uk/images/images/fauxcolumn_1.jpg) repeat-y 50% 0;
}
#columnleft3 {
width:34%;
float:left;
}
#columnleft3 p {
}
#columnmain3 {
width:33%;
float:left;
}
#columnmain3 p {
}
#columnright3 {
width:33%;
float:left;
}
#columnright3 p {
}
#wrapper3column {
width:800px;
background:red;
margin-left:auto;
margin-right:auto;
}
#footer3 {
height:20px;
background:#00CC99;
clear:both;
}
/* 3 column css ends*/
.outer {
width:100%;
overflow:hidden;
position:relative;
}
.abs {
position:absolute;
left:0;
bottom:20px;
top:0;
width:34%;
background:#CC00CC;
z-index:0;
clear:both;
}
.a2 {
left:34%;
width:33%;
background:yellow;
border-left:1px solid #000;
border-right:1px solid #000;
z-index:1;
margin-left:-1px;
}
.a3 {
left:67%;
width:33%;
background:green;
}
#columnleft3, #columnmain3, #columnright3 {
position:relative;
z-index:2;
}
* html .abs {
top:auto;
bottom:19px;
height:999em;
}
</style>
</head>
<body id="tutorial">
<div id="wrapper3column">
<div id="header3"> Header </div>
<div class="outer">
<div id="columnleft3">
<p>TEST column left TEST column left TEST column left TEST column left TEST column left </p>
</div>
<div id="columnmain3">
<p>TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column centralTEST column central TEST column central TEST column central TEST column central</p>
</div>
<div id="columnright3">
<p>TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. </p>
</div>
<div id="footer3">
<p>Footer</p>
</div>
<div class="abs a1"></div>
<div class="abs a2"></div>
<div class="abs a3"></div>
</div>
</div>
</body>
</html>
If you have a fixed pixel width layout then don’t divide it with percent because that will result in pixels being rounded and not adding up.
That’s a bit of a departure from the usual sunny report. You must be having a bad day.
I’m not sure what you are trying to do with that little background image. To do faux columns with this layout, all you need is a repeating background on the wrapper. Make the image 800px wide (and about 10px high) with the three column colors represented on that image. Standard stuff.
Brilliant thank you! job done. Went for solution 1 not because I am in any way qualified to know which was better just decided to go for it and it worked
Something has got me curious and its this line of css:
background:red url(…/images/faux_column2.jpg) repeat-y 50% 0;
I would like to know in the line referenced what this means 50% 0; I understand the rest of it but the end two bits if someone could explain…
Yes, as sdleihssirhc said, it’s giving the horizontal and vertical position of the background image. 50% means that the 50% mark of the image (i.e. the half-way point along the top) should align with the exact middle of the element it’s applied to.
The 0 means that it starts from the top of the element (0px, 0% etc. from the top).
That’s a bit of a departure from the usual sunny report. You must be having a bad day.