Grow your CSS skills. Land your dream job.

CSS Expanding content box doesnt expand down with content.

  • # August 21, 2009 at 12:32 pm

    Hello,

    I started off trying to build a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide.

    This box worked great with the screen res but now i’m trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar.

    Any idea how I can make the box expand with my content?

    here is a link to my test page. http://www.gamerunion.com/test.html

    My css code.

    Code:
    div#case {
    position:absolute;
    z-index:1;
    top:200px;
    left:50px;
    bottom:50px;
    right:50px;
    background:url(/assets/images/tile.png) repeat;
    }
    div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
    width:0;
    height:0;
    overflow:hidden;
    display:block;
    }
    div#tlcorner {
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    background:url(/assets/images/corners.png) -369px 0 no-repeat;
    width:123px;
    height:123px;
    }
    div#trcorner {
    position:absolute;
    z-index:10;
    top:0;
    right:0;
    background:url(/assets/images/corners.png) -246px 0 no-repeat;
    width:123px;
    height:123px;
    }
    div#blcorner {
    position:absolute;
    z-index:10;
    bottom:0;
    left:0;
    background:url(/assets/images/corners.png) 0 0 no-repeat;
    width:123px;
    height:123px;
    }
    div#brcorner {
    position:absolute;
    z-index:10;
    bottom:0;
    right:0;
    background:url(/assets/images/corners.png) -123px 0 no-repeat;
    width:123px;
    height:123px;
    }
    div#lftile {
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    bottom:0;
    background:url(/assets/images/lr.png) -20px 0 repeat-y;
    width:20px;
    }
    div#rttile {
    position:absolute;
    z-index:5;
    top:0;
    right:0;
    bottom:0;
    background:url(/assets/images/lr.png) 0 0 repeat-y;
    width:20px;
    }
    div#tptile {
    position:absolute;
    z-index:5;
    top:0;
    right:0;
    left:0;
    background:url(/assets/images/tb.png) 0 0 repeat-x;
    height:123px;
    }
    div#btmtile {
    position:absolute;
    z-index:5;
    bottom:0;
    right:0;
    left:0;
    background:url(/assets/images/tb.png) 0 -123px repeat-x;
    height:123px;
    }
    div#case div.content {
    position:absolute;
    z-index:10;
    width:100%;
    min-height:400px;
    overflow:hidden;
    }
    div#case div.content h1 {
    font-family: “Times New Roman”, serif, sans-serif, Arial;
    font-size:16px;
    color:#000000;
    margin:5px 0;
    padding:100px 0 0 100px;
    text-align:left;
    text-transform:capitalize;
    }
    div#case div.content p {
    font-family: “Times New Roman”, serif, sans-serif, Arial;
    font-size:14px;
    color:#000000;
    text-align:justify;
    padding:0 100px;
    }

    HTML

    Code:

    top left corner
    top right corner
    bottom left corner
    bottom right corner
    top side tile
    left side tile
    right side tile
    bottom side tile

    Gamerunion

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    Text text text text

    # August 21, 2009 at 3:32 pm

    Is it just me… or are you missing an opening div tag before the content section you’re referring to? My eyes may be playing tricks on me.

    # August 21, 2009 at 4:20 pm

    I think I’ve got them all. I’ve been making a lot of adjustments so If I missed it i must have added it back in.

    So far i can add min height and move the box down manually but I don’t know how thats going to work if it needs to be a different height on each page.

    Thanks for all your advice.

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

You must be logged in to reply to this topic.

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