• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 499
  • Last Modified:

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

Hi friends. I can use some more help with my CSS.

I am trying to create a vertical rule that extends the length of two columns. You can see my effort here:

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

As you can see, I simply added to the left column this declaration: border-right:2px solid #e3a610;

However this rule extends only the length of the left column. This page will be a template used for many pages, and the columns will always be uneven. Sometimes the right will be longer and sometimes the left.

Can you suggest how I can create a vertical rule that extends the full length of the page, no matter how long or short each column is?

Thanks very much for any ideas.

The style sheet is located here:

http://ascassociation.org/ascassociation.css

Eric


#two-col-left	{
float:left;
border-right:2px solid #e3a610;
width:400px;
padding:0 20px 0 0;
background-color:#fff;
margin:20px 0 0 0;
}
 
#two-col-right	{
float:left;
width:280px;
padding:0 0 0 20px;
background-color:#fff;
margin:20px 0 0 0;
}

Open in new window

0
Eric Bourland
Asked:
Eric Bourland
  • 6
  • 6
  • 5
  • +2
3 Solutions
 
hieloCommented:
add a left border to <div id="two-col-right">
#two-col-right{
border-left:3px solid gold;
}

0
 
Eric BourlandAuthor Commented:
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
0
 
hieloCommented:
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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Keale2Commented:
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

0
 
Eric BourlandAuthor Commented:
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
0
 
hieloCommented:
>>Yes, the point is, column lengths will change.
Ahh. I thought the right col will always be greater. If you want a javascript solution then put this on your page:
<script language="text/javascript">
window.onload=createVerticalRule;
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';
          }
          else
          {
               rightDiv.style.borderLeftWidth = '2px solid #e3a610';
               leftDiv.style.borderRight = '0px';
          }
}
</script>

Open in new window

0
 
Keale2Commented:
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.
0
 
hieloCommented:
>>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).
0
 
Keale2Commented:
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.
0
 
Eric BourlandAuthor Commented:
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
0
 
hieloCommented:
>>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.
0
 
Keale2Commented:
There is a solution, but you'll have to go through your CSS and change some things.
Remove the background from all elements contained in div #row4-internal.

Add to div #row4-internal
{
        background-image: url('content-background.jpg');
      background-repeat: repeat-y;
}
0
 
Keale2Commented:
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.
0
 
David S.Commented:
There's a way to do this without JavaScript and without using a background image. Here's an example:
http://www.pmob.co.uk/temp/2column_simple_1.htm
0
 
Eric BourlandAuthor Commented:
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
0
 
Eric BourlandAuthor Commented:
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
0
 
karimjohnsonCommented:
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??
0
 
Keale2Commented:
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.
0
 
Eric BourlandAuthor Commented:
Hi, karimjohnson,

You might want to open up a new question regarding this. That way the experts can help you out directly. I am also interested in taking a look at the problem. I'd like to assist if I can.

Best from Eric
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 6
  • 5
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now