Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-06-13
19
Medium Priority
?
496 Views
Last Modified: 2013-11-19
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
Comment
Question by:Eric Bourland
  • 6
  • 6
  • 5
  • +2
19 Comments
 
LVL 82

Expert Comment

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

0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 21783754
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
 
LVL 82

Expert Comment

by:hielo
ID: 21785320
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
Technology Partners: 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!

 
LVL 2

Expert Comment

by:Keale2
ID: 21785388
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 21785582
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
 
LVL 82

Assisted Solution

by:hielo
hielo earned 400 total points
ID: 21785642
>>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
 
LVL 2

Expert Comment

by:Keale2
ID: 21785679
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
 
LVL 82

Expert Comment

by:hielo
ID: 21785736
>>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
 
LVL 2

Expert Comment

by:Keale2
ID: 21785831
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 21785911
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
 
LVL 82

Expert Comment

by:hielo
ID: 21785964
>>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
 
LVL 2

Accepted Solution

by:
Keale2 earned 1200 total points
ID: 21786005
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
 
LVL 2

Expert Comment

by:Keale2
ID: 21786009
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
 
LVL 43

Assisted Solution

by:David S.
David S. earned 400 total points
ID: 21786080
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 21786502
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 21786571
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
 

Expert Comment

by:karimjohnson
ID: 21899968
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
 
LVL 2

Expert Comment

by:Keale2
ID: 21901391
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 21901641
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

972 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question