- This topic is empty.
-
AuthorPosts
-
August 21, 2009 at 12:32 pm #25830BossChaseMember
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:GamerUnion
For Gaming Addicts by Gaming Addicts.
top left cornertop right cornerbottom left cornerbottom right cornertop side tileleft side tileright side tilebottom side tileGamerunion
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 #62527EpicEyesMemberIs 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 #62529BossChaseMemberI 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.