2 replies [Last post]
Astaroth2
Offline
newbie
Last seen: 13 years 30 weeks ago
Joined: 2007-04-28
Posts: 1
Points: 0

I have 2 columns on a page which are fixed widths (bodyleft and bodyright) which using float are in the correct position however I want a 1pix border/ divider down the middle to divide them. The only problem is the content of the 2 columns is dynamic and therefore I do not know which of the two will be the longest.

How can I achieve this (preferably without javascript) as using a border which was my original idea was to have a 1px border but on the right/ left but naturally they either go side by side making it 2 px wide and not the same length or to "overlap" them so it is 1px but then of cause they wont float side by side.

Many thanks

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 38 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

There are a couple of ways

There are a couple of ways to achieve this. One would be to use a background image on the containing element. Another would be to use the border method you mention, but position one of the floats relatively 1px closer to the other float.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 29 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9773
Points: 3855

I do that in my 2 column -

I do that in my 2 column - apparent equal height demo. The 'secret' is to overlap the adjacent borders. Or, what Wolfie said. Smile

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.