Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Can't make floated middle column stretch height:100%

Bottom of Page

1 to 7 of 7

  1.  
    •  
      CommentAuthorkenbacca
    • CommentTimeFeb 27th 2006
     permalink
    Hello,

    I haven't had any luck getting my middle column to stretch it's height 100% when my right columns height is larger. I changed my height back to a fixed height for the time being. Do I need to nest my content column inside my middle column to acheive this?

    http://www.kenbacca.com

    Can anyone point me in the right direction?
  2.  permalink
    Height: 100% refers to 100% of the parent element.

    You must use a combination of min-height and height (for IE) on the body, html and parent container to achieve the effect you want.
    •  
      CommentAuthorkenbacca
    • CommentTimeFeb 27th 2006
     permalink
    Thanks for your suggestion. I added height:100%; and min-height:100%; to html, body, #wrapper (the parent div) and #sidebar (the column i'm trying to get to stretch) to no avail.

    The problem is on this page "http://www.kenbacca.com/?p=6". When the content column is larger than the screen size, the middle column bg doesn't expand to the full height.

    Here's the css i'm trying to use:

    html {
    height:100%;
    min-height:100%;
    }

    body {
    height:100%;
    min-height:100%;
    margin: 0;
    background: #535353 url("images/main_bg.jpg") repeat-x;
    font:11px/15px "Trebushet MS", Arial, Helvetica, sans-serif;
    color: #e6e6e6;
    text-align:center;
    }
    /*------------ positioning elements --------------*/
    #wrapper {
    margin-right:auto;
    margin-left:auto;
    width:1119px;
    height:100%;
    min-height:100%;
    }
    #header {
    float:left;
    width:367px;
    height:609px;
    background: url("images/header.jpg") no-repeat;
    }
    #sidebar {
    padding-top:40px;
    float:left;
    text-align:left;
    height:100%;
    min-height:100%;
    background:#2a2a2a url("images/sidebar_bg.jpg") repeat-y;
    width:286px;
    }
    #content {
    padding:40px 20px 0px 20px;
    float:right;
    width:420px;
    text-align:left;
    }
    • CommentAuthorbierk
    • CommentTimeFeb 27th 2006
     permalink
    If you want the sidebar-background tot stretch untill the bottom of the wrapper (or body) you should attach it to the #wrappertag or the bodytag.

    I don't believe there's a mothod to stretch the sidebar more then 100% if there isn't anything in it witch is longer then 100%.
    •  
      CommentAuthorkenbacca
    • CommentTimeFeb 27th 2006
     permalink
    bierk:
    Thanks for the suggestion. For some reason I thought that you could get it to stretch. I was playing around with background-attachment:fixed, which didn't work either.
    • CommentAuthorbierk
    • CommentTimeFeb 27th 2006
     permalink
    You might want to take a look at allistaparts "faux collums"... I think that's a solution to your problem...

    btw I think your site looks great ;-)
    • CommentAuthorvesa
    • CommentTimeFeb 27th 2006 edited
     permalink
    Hi,

    you could also try this method (if you have some problems with the "faux columns" method even tought it should be easier to do).

    So it would be something like this in your css (add these to the bottom of your style.css):

    #sidebar, #content, #header { padding-bottom: 32767px; margin-bottom: -32767px; }
    #wrapper { overflow: hidden; }

    and edit your #wrapper to this:

    #wrapper {
    margin-right:auto;
    margin-left:auto;
    width:1119px;
    }

    So you would remove these values: height:100%; min-height: 100%;

    Later,

    Vesa

1 to 7 of 7

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page