Wed, 2005-01-26 17:46
Me again.
The main section of my page comprises a centred, contained 3 column layout (3 divs floated left). Unsurprisingly the middle column holds the content and therefore a lot of text. I'd like to colour the right-hand div and have it match the length of the middle column so the colour stretches all the way down, regardless of how little text it holds.
I've spent the day staring at different layouts (specifically the ordered borders example on positioniseverything) and it looks rather confusing, and maybe I'll have to start from scratch - can anyone offer me a ray of hope ... ie, a more simple way of doing this?!
Many thanks
x
Wed, 2005-01-26 18:24
#1
3-column layout, coloured right-hand column
Equi-length columns are an illusion. Since you only need one column colored, you might be able to adapt this 2 Column - Apparent Equal Height demo. It uses the popular 'faux column' method.
cheers,
gary
Wed, 2005-01-26 19:30
#2
3-column layout, coloured right-hand column
Hi Gary, thanks for getting back to me with that great link.
I think I understand what this is getting at, but I think it throws up other problems with a 3-column layout - I've set the bg of the wrapper which works fine for the right-hand column, but the colour pokes through at the bottom of the left-hand column after the text finishes. I guess a way around it would be to set the height of all the floating divs, but that removes the flexibility.
Phew, I thought this looked pretty straightforward when I first approached it! Any thoughts anyone?
Thu, 2005-01-27 05:41
#3
3-column layout, coloured right-hand column
Look again. The bg color for the column is not set with a background color. It is faked by using a background image. The image is as wide as the column and tiled vertically.
cheers,
gary
Thu, 2005-01-27 11:48
#4
3-column layout, coloured right-hand column
aha, thanks for pointing that out, I'll give it another go!
Thu, 2005-01-27 12:02
#5
3-column layout, coloured right-hand column
got it! If anyone else is interested, you set the width of the bg image to the width of the column you want to colour, then set the position accordingly - in this instance my column is 172px wide, so I made a flat colour image 172 px wide x 2px high, then set the position inside the wrapper so that it repeats on the y axis (lengthwise) on the right-hand side, as follows
#wrapper{
width:700px;
text-align:left;
margin-left:auto;
margin-right:auto;
border: 1px solid #CAD7DF;
background: white url(images/bg_blue.gif) top right repeat-y;
}
Thanks again Gary