Grow your CSS skills. Land your dream job.

Borders to display on the entire height.

  • # November 21, 2012 at 12:00 am

    Hi all,

    I’m working on this site:
    http://www.robertallenbaker.com/highnoteny/

    but I’m wondering, how do I get the borders to display down the entire thing? (left and right borders that are in the middle).

    I’ve tried min-height: 100% and height: 100% and they both don’t seem to work.

    Also, is overflow: auto the best solution to keep backgrounds covering the back of the content. Without it the background doesn’t want to cover everything.

    # November 21, 2012 at 12:15 am

    @robertallen : If you just want a box that will have borders going down the side, just add this to the#container.

    position:absolute;
    width:816px;
    height:100%;
    left:50%;
    margin-left:-408px;

    However, if you do that then only add border left and border right.

    But i would suggest using a sticky footer (im assuming you will have a footer and content that will grow).

    http://www.cssstickyfooter.com/using-sticky-footer-code.html

    # November 21, 2012 at 2:33 am

    Oh I mean the middle column inside the container. This is the first time I’ve ever had to have to use borders inside my container to separate columns inside, so I’m needing the borders to stretch all the way to the bottom.

    PS love sticky footer!

    # November 21, 2012 at 4:19 am

    What you’re attempting to do is one of the problems with columns in that you can’t really have all columns match height without specifying an actual height in PX (which is usually not possible taking into account the content will be variable.

    What I have done in situations like this is to cheat, using a background image on the container for all the columns. Alternatively you could go one further and use a gradient for the background that will ensure the percentages etc are correct, but again it’s not an easy fix.

    # November 21, 2012 at 5:33 am

    #content {
    border-left: 1px solid #707070;
    float: left;
    width: 525px;
    }

    #left_sidebar {
    float: left;
    width: 140px;
    }

    # November 21, 2012 at 9:55 am

    @mazhar19 I’m not sure what that is intended to do.

    The issue, it seems to me, to ensure that the ‘content’ div has side borders regardless of whether it is taller or shorter than the sidebars.

    Practically, the only resolution will involve javascript.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".