SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border needs to go all the way to page bottom

    Hello,

    I have two divs (#maincontent and #sidebar_wrap).

    I would like a 1px border along the left side of div#sidebar_wrap that goes to the bottom of the page.

    Currently I have border-right: 1px solid #ccc; on div#maincontent

    But depending on the content inside div#maincontent, the border stops short, like on this page:
    http://t2.pcirs.com/our-company

    If I put the border on the left of #sidebar_wrap, the border stops short again if the content inside #maincontent is long, like on this attached screenshot:
    screenshot.jpg

    Any ideas?

    thanks

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is a example of how http://www.ericwwatson.com/. What I did was absolute position a div 1px wide with a background color with height 100%. Or you can use top 0 bottom 0.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Or you can use content property and say sidebar:before with the styles. This way no need for extra div.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant!! Thank you

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Or for another method you can just add a border to the right float as well and then make the borders sit on top of each other with a negative margin.

    Code:
    #maincontent{
    margin-right:-1px;
    border-right: 1px solid #CCCCCC;
    }
    #sidebar_wrap{
    border-left:1px solid #ccc;
    }
    I that way the border will always be as long as the tallest element

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh that's a nice idea
    thanks you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •