border between post area and sidebar

  • I’m trying to place a 1px border between the post area (content area) and the sidebar

    The problem is:

    If I put: border-right: 1px solid ##9a9a9a; on the content div and the sidebar is longer than the content area, then the border does not go all the way down to the footer.
    The reverse is also true if I put: border-left: 1px solid #9a9a9a; on the sidebar div.

    I think I can get around the problem by using some kind of gif file (example: border.gif ), but I’m not quite sure how or where to code the gif file in, or how to make a gif file that will simulate a border that is 1px in width with the color #9a9a9a to match.

    Any suggestions ?

Viewing 9 replies - 1 through 9 (of 9 total)

  • A site reference would help quite a bit ??

    Thread Starter rvblog

    (@rvblog)

    Ok,

    I temporarily activated the layout that I’m playing with:

    https://www.rvadventure.ca/

    Notice how I have a 1px solid #9a9a9a border around the outside of my wrapper div and my navbar.

    I would like a matching border separating my content area with my sidebar (between and from top to bottom)

    You will need to use a ‘faux column’ technique.

    Create the necessary image then have it as a background image for your main container div and align it right.

    This technique is used in gemini layouts.

    Try adding

    border-right: 1px solid #B54141;

    to your .narrowcolumn

    Thread Starter rvblog

    (@rvblog)

    @shadow:

    I tried that and it does not work for reasons stated above;

    @podz:

    I knew I seen it somewhere – thanks – I’ll check the gemini theme out to see how it’s done
    Do I just use a paint program to create the gif ??

    Go to https://shadows.os42.com/bg1.jpg and grab that image.
    Save to your images directory.

    Replace
    #page {
    background-color: #ddddcc;

    with

    #page {
    background: #ddddcc url('images/bg1.jpg');

    This will give you a black 1px line down between your content and menu. If you want to change the black line – use a paint program to fill the black…

    HTH ??

    Thread Starter rvblog

    (@rvblog)

    I checked out gemini and the gif example in that theme is not really what I’m looking for – that gif is very wide and covers the entire sidebar area.

    I remember seeing somewhere, where a simple 1px gif file (the actual file is only 1px wide) is repeated somehow so that it goes all the way down to the footer – similar to the way a background gif is repeated downward – repeated x or y or something like that

    I just don’t remember where I seen it, or how and where to include the code in my css file.

    Thread Starter rvblog

    (@rvblog)

    @ shadow:

    Sorry, I was typing a response as you were replying

    I’ll check that out

    Thanks

    Thread Starter rvblog

    (@rvblog)

    I had to put it with my wrapper div – but it worked great

    thanks for the help everyone

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘border between post area and sidebar’ is closed to new replies.