Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Expanding content box doesnt expand down with content.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25830
    BossChase
    Member

    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

    #62527
    EpicEyes
    Member

    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.

    #62529
    BossChase
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.