Solved

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

Posted on 2008-06-13
19
481 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

762 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

22 Experts available now in Live!

Get 1:1 Help Now