3 replies [Last post]
OpossumPetya
Offline
newbie
Last seen: 14 years 17 weeks ago
Joined: 2006-02-01
Posts: 1
Points: 0

im new to css layouts, but done some reading. though obviously not enough Sad

i need to create two columns css layout (left-wide, right-sidebar) and have one pixel line between columns. and i need that line to go all the way down (lets say, from header to footer) no matter whch side is taller left or right.

with tables i could just have one pixel column which would always be as tall as tallest column, but how do i do it with CSS? can't use border cause i never know which side will be taller. what do i do?

any suggestions would be appreciated,
tia!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

One px line between columns

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9755
Points: 3837

One px line between columns

Actually, you can use borders, if they overlap. See 2 col—apparent equal height. The demo employs the faux column technique for the color, and overlapping borders.

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.

KingpinS
Offline
newbie
Houston
Last seen: 14 years 17 weeks ago
Houston
Joined: 2006-02-01
Posts: 3
Points: 0

Couple of ways

Create a custom image and then use it as part of your body background image, and set background-repeat to y. "background-repeat: repeat-y; "

This will make it so that the background image for body will be repeated over until the end of your body area / will be as tall as your tallest column since both of those column reside within the body area.

But if the image is not tileable or you need another option then there are also another property which allows you control the position of a background image so that you can give it a custom let's say 70% from the left side. "Background-Position: ..." property

For more info on the above tag try this link: http://www.w3schools.com/css/pr_background-position.asp

GL,

Sam