treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Borders to display on the entire height.

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

  • @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

  • 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!

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

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

    }

       #left_sidebar {
          float: left;
         width: 140px;
       }
    
  • @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.