5 replies [Last post]
analogdog
Offline
newbie
Last seen: 15 years 34 weeks ago
Joined: 2004-11-15
Posts: 10
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 min 41 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

analogdog
Offline
newbie
Last seen: 15 years 34 weeks ago
Joined: 2004-11-15
Posts: 10
Points: 0

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 min 41 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

analogdog
Offline
newbie
Last seen: 15 years 34 weeks ago
Joined: 2004-11-15
Posts: 10
Points: 0

3-column layout, coloured right-hand column

aha, thanks for pointing that out, I'll give it another go!

analogdog
Offline
newbie
Last seen: 15 years 34 weeks ago
Joined: 2004-11-15
Posts: 10
Points: 0

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