September 14th, 2013, 02:59 PM
How to get CSS Border to go all the way
I have two DIVs side by side enclosed with header and footer DIVs. I want a border between the two DIVS that stretches between the header and footer DIVs.
When I set the right hand DIV to have a left border it works only if the right hand DIV has a greater height. (The height is dynamic according to how much text is placed there. I do not want to move the border on a daily basis as the amount of text changes).
www (dot) cykeltours (dot) se/test_border1/
Correct: The border goes all the way down. (Because the right hand DIV has a greater height than the left one).
www (dot) cykeltours (dot) se/test_border2/
Incorrect. The border stops at the bottom of the right-hand DIV. (Because the right hand DIV has a smaller height than the left one).
I know "why" the border does this, it's because it only runs to the end of text. But surely there is a workaround for this?
Any help greatly appreciated
September 14th, 2013, 05:46 PM
The attached file is how I would go about it...using a contentwrapping DIV and a background image.
The attached file has the image included base64 encoded. Just rename from .txt to .html to see result.
September 14th, 2013, 06:35 PM
Thanks, nearly there
Thanks for that, now I just need to understand how that actually works.
Originally Posted by DonR
How can I do it with an actual background image? I tried with a color 10px x 10px blank image with strange results.
What exactly is the role of the image in getting the border to resize?
Cheers for any help.
September 15th, 2013, 01:34 AM
the background image was created to be the entire width of the DIV [~1060px in this case] and the vertical line I created in the image at 190px in from the left [which is where your CSS placed the border]..I then used the marquee tool in photoshop to create a 1px high by 1060px wide image and saved that...and used it as background-image for the wrapping DIV and told it to repeat-y which is to repeat vertically.
If you would rather see the actual image instead of having the base64 encoded version of it, I can attach it, so, you have something to actually see as a file.
HERE is another way to do equal heights without using image.
if you do a "google" for "equal height column css", you should find what you need to be able to do what you want.
Last edited by DonR; September 15th, 2013 at 01:38 AM.
September 15th, 2013, 07:13 AM
Thanks, I found a way that was a little easier for me to grasp. I am however sure as time progresses I will realise there are better ways to do this. Need a bit more knowledge in css first.
Originally Posted by DonR
I added a new div around the part I needed the border in with a 1px background image at the border limit.
background: url(bg-vert-line.gif) 190px 0 repeat-y;