Solved

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

Posted on 2008-06-13
19
484 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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 100 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 300 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 42

Assisted Solution

by:David S.
David S. earned 100 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

815 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now