How to create a vertical rule that extends length of page, between two columns of varying size?

add a left border to <div id="two-col-right">
#two-col-right{
border-left:3px solid gold;
}

ASKER

hielo I was fooling around with a solution similar to this but could not think how it could work. I'll try your solution in a little while and get back to you. Thanks very much for your time.

Eric

For purposes of testing, I tried this:
<div id="two-col-right" style="border-left:3px solid gold;">

and was able to see a vertical line spanning the height of the entire right col.

Hello, Eric.
It looks like the right column is much longer than the left, so try this:
Remove:
border-right:2px solid #e3a610;
from the #two-col-left style.
Add:
border-left: 2px solid #e3a610;
to the #two-col-right style.

If you want this to work regardless of which column is longer, here is a javascript solution (add to the head of your document). Also add onload="createVerticalRule()" to your body element.

<script language="text/javascript">
function createVerticalRule()
{
     var leftDiv = document.getElementById('two-col-left');
     var rightDiv = document.getElementById('two-col-right');
          if(leftDiv.offsetHeight > rightDiv.offsetHeight)
          {
               rightDiv.style.borderLeftWidth = '0px';
               leftDiv.style.borderRight = '2px solid #e3a610';
          }
}
</script>

Open in new window

ASKER

Interesting. I played around last night with hielo's first solution, trying different values, and could not quite get it to work. The javascript solution looks useful.

Yes, the point is, column lengths will change.

I'll work further on this today and get back to you.

Thank you hielo and Keale2. Have a great day. More later ...

Eric

SOLUTION

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Hielo,
I think it is best to remove the 'else' from the javascript, and just set the border on the right column by default. Doing this will ensure that there is still a border for users without javascript, and it will also avoid making the border blink when the page is loaded.

Eric,
Hielo is right on the following:
window.onload = createVerticalRule;
This is a better solution than putting the function in the onload of the body element.

>>Doing this will ensure that there is still a border for users without javascript
This is decision that needs to be made by the designer. If there is no javascript and the left column is "taller", then you will have a "short ruler" which is what I believe the poster is trying to avoid. Your suggestion is NOT bad/incorrect. However, if it were me, for the sake of consistency I would either provide no border (when javascript is disabled) OR provide the correct height (when javascript is enabled).

That's a good point.
On his current site he is already opting for a short vertical rule instead of none at all, so I assume he has already made that decision. Also, his layout looks like the right column will be taller than his left in most situations.

ASKER

Hi friends. I definitely prefer a CSS solution over a javascript solution. I'm continuing to experiment with both. I really appreciate your input. I'll come back here with a new version, later this afternoon. (I'm in Chicago on CST.)

Have an excellent day.

Eric

>>Also, his layout looks like the right column will be taller than his left in most situations.
That's what I thought to; hence my original suggestion.

>>I definitely prefer a CSS solution over a javascript solution
You will not be able to determine which of the two is higher with css. You will need the scripting solution.

ASKER CERTIFIED SOLUTION

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

It doesn't look like it added my image, but it was just 1px tall image with a width equal to your content container. Create 2px of that gold color at the appropriate location on the image. When it repeats, it will look like a border.

SOLUTION

David S.

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ASKER

Kravimir, that is interesting.

Keale2 and hielo's solutions are viable too.

I'm still trying out options.

My thanks to all of you, and I'll get back to you soon.

Eric

ASKER

All righty. I ended up using a background image:

http://ascassociation.org/two-column.html

For some complicated reasons, related to the CMS I built for this site, it's problematic to use a javascript, or the solution that Kravimir suggested. I like both of these solutions and am very grateful that you took time to suggest them. I considered them carefully, and have learned a lot while I have worked on this problem.

Thanks again, friends. Hope you are enjoying the day.

Eric

karimjohnson

I have a similar problem. I set up the main content area to have a left border, because my main content area is always bigger than my sidebar. However, if I place a graphic in the main content area and no content to the left or right of it, the border gets a break in it. How do I fix that??

Karim,
Do you have a link to this page? I'd like to see it so I can know exactly what you mean.
If you can't get a link, can you upload a picture of the problem?
Thanks.