#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    6
    Rep Power
    0

    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).

    Two examples
    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

    Garry Jones
    Sweden
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    830
    Rep Power
    275
    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.
    Attached Files
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    6
    Rep Power
    0

    Thanks, nearly there


    Originally Posted by DonR
    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.
    Thanks for that, now I just need to understand how that actually works.

    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.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    830
    Rep Power
    275
    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 12:38 AM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    6
    Rep Power
    0

    Thanks


    Originally Posted by DonR
    if you do a "google" for "equal height column css", you should find what you need to be able to do what you want.
    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.
    I added a new div around the part I needed the border in with a 1px background image at the border limit.
    <code>
    div.vvv {
    background: url(bg-vert-line.gif) 190px 0 repeat-y;
    width:1060px;
    }
    </code>

IMN logo majestic logo threadwatch logo seochat tools logo