Layered DIVs, text going outside the container DIV, background messed up

frifox

01-05-2008, 01:09 AM

I have a main DIV with other divs inside it, in 2 layers. 1st layer is the pretty background, and the 2nd layer is the content. everything is okay untill the content extends beyond the window size.

SITE DEMO: LINK (http://golosmira.com/site)

then.... scroll bars appear, but when scrolling in FF/IE7, the background layer stays static and content text extends past the parent DIV.
in IE6, the content text is even more awkward. no scrollbars and text extends to past the window to the top! check out the screenshots below:

FF/IE7 screenshot:
http://img150.imageshack.us/img150/7804/ffie7rv2.png (http://img512.imageshack.us/img512/9907/ffie7zn0.png)

IE6 screenshot:
http://img299.imageshack.us/img299/6944/ie6gc2.png (http://img512.imageshack.us/img512/5725/ie6rg0.png)

You can check out the site below:
http://golosmira.com/site

and here are the HTML/CSS sources:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" href="css.style.css" type="text/css" />
</head>

<body>
<div id="main">
<div id="TL"></div>
<div id="TR"></div>
<div id="BL"></div>
<div id="BR"></div>
<div id="T"></div>
<div id="L"></div>
<div id="R"></div>
<div id="B"></div>
<div id="X">
01<br />02<br />03<br />04<br />05<br />06<br />07<br />
08<br />09<br />10<br />11<br />12<br />13<br />14<br />
15<br />16<br />17<br />18<br />19<br />20<br />21<br />
22<br />23<br />24<br />25<br />26<br />27<br />28<br />
29<br />30<br />31<br />32<br />33<br />34<br />35<br />
36<br />37<br />38<br />39<br />40<br />41<br />42<br />
43<br />44<br />45<br />46<br />47<br />48<br />49<br />
50<br />51<br />52<br />53<br />54<br />55<br />56<br />
</div>
</div>
</body>
</html>

* {
padding: 0;
margin: 0;
border: 0;
}
body, html {
width: 100%;
height: 100%;
font-size: 16px;
}

#main {
height: 100%;
width: 100%;
margin: 0 auto;
position: relative;
background-color: #f9f6f3;
}
#TL {
height: 150px;
width: 150px;
position: absolute; top: 0; left: 0; z-index: -1;
background-image: url(img.mainbg.topleft.png);
}
#TR {
height: 150px;
width: 150px;
position: absolute; top: 0; right: 0; z-index: -1;
background-image: url(img.mainbg.topright.png);
}
#BL {
height: 150px;
width: 150px;
position: absolute; bottom: 0; left: 0; z-index: -1;
background-image: url(img.mainbg.botleft.png);
}
#BR {
height: 150px;
width: 150px;
position: absolute; bottom: 0; right: 0; z-index:-1;
background-image: url(img.mainbg.botright.png);
}
#T {
height: 150px;
width: 100%;
position: absolute; top: 0; z-index: -2;
background-image: url(img.mainbg.top.png);
}
#L {
height: 100%;
width: 150px;
position: absolute; left: 0; z-index: -2;
background-image: url(img.mainbg.left.png);
}
#R {
height: 100%;
width: 150px;
position: absolute; right: 0; z-index: -2;
background-image: url(img.mainbg.right.png);
}
#B {
height: 150px;
width: 100%;
position: absolute; bottom: 0; z-index: -2;
background-image: url(img.mainbg.bot.png);
}
#X {
height: 100%;
width: 100%;
position: absolute; bottom: 0; z-index: 0;
text-align: center;
}

This is my first shot at the DIV based layout. what i'm shooting for it to have background be 100% height/width, BUT if the content extends past the window size - i want background to extend as well.

Can anyone help me with this problem, it drives me nuts :eek:!
thanks for all your help in advance!

Excavator

01-05-2008, 02:02 AM

You can see that the 100% height is one screen and no more. I'm surprised it worked so well in IE6.

Pretty easy to slip it all into my full height layout example (http://nopeople.com/CSS/full-height-layout/)though:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
height: 100%;
}
body{
height: 100%;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #00FF66;
}
* {
margin: 0;
padding: 0;
}
#wrap {
min-height: 100%;
width: 100%;
text-align: left;
background-color: #f9f6f3;
}
* html #wrap {
height: 100%
}
#TL {
height: 150px;
width: 150px;
position: absolute; top: 0; left: 0; z-index: 1;
background-image: url(http://golosmira.com/site/img.mainbg.topleft.png);
}
#TR {
height: 150px;
width: 150px;
position: absolute;
top: 0; right: 0; z-index: 1;
background-image: url(http://golosmira.com/site/img.mainbg.topright.png);
}
#BL {
height: 150px;
width: 150px;
position: absolute; bottom: 0; left: 0; z-index: 1;
background-image: url(http://golosmira.com/site/img.mainbg.botleft.png);
}
#BR {
height: 150px;
width: 150px;
position: absolute; bottom: 0; right: 0; z-index: 1;
background-image: url(http://golosmira.com/site/img.mainbg.botright.png);
}
#T {
height: 150px;
width: 100%;
position: absolute; top: 0; z-index: 0;
background-image: url(http://golosmira.com/site/img.mainbg.top.png);
}
#L {
height: 100%;
width: 150px;
position: absolute; left: 0; z-index: 0;
background-image: url(http://golosmira.com/site/img.mainbg.left.png);
}
#R {
height: 100%;
width: 150px;
position: absolute; right: 0; z-index: 0;
background-image: url(http://golosmira.com/site/img.mainbg.right.png);
}
#B {
height: 150px;
width: 100%;
position: absolute; bottom: 0; z-index: 0;
background-image: url(http://golosmira.com/site/img.mainbg.bot.png);
}
#X {
height: 100%;
width: 100%;
position: absolute; bottom: 0; z-index: 1;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="TL"></div>
<div id="TR"></div>
<div id="BL"></div>

<div id="BR"></div>
<div id="T"></div>
<div id="L"></div>
<div id="R"></div>
<div id="B"></div>
<div id="X">
01<br>02<br>03<br>04<br>05<br>06<br>07<br>

08<br>09<br>10<br>11<br>12<br>13<br>14<br>
15<br>16<br>17<br>18<br>19<br>20<br>21<br>

22<br>23<br>24<br>25<br>26<br>27<br>28<br>
29<br>30<br>31<br>32<br>33<br>34<br>35<br>

36<br>37<br>38<br>39<br>40<br>41<br>42<br>
43<br>44<br>45<br>46<br>47<br>48<br>49<br>

50<br>51<br>52<br>53<br>54<br>55<br>56<br>
</div>
</div>


</body>
</html>

frifox

01-05-2008, 03:32 AM

i tried your version... same problem persist :confused:

btw the background is 100% height/width of the container DIV. and both background and the text content are enclosed in that same div.

ok. lets put the background aside.
the problem is if the text content is too big, the parent div doesnt resize to fit the text. text simply continues out of the DIV :( if i were to use tables, the cell would expand to compensate and enclose ALL text... but i seriously dont want to go back to tables!

Excavator

01-05-2008, 02:49 PM

Yes I see. Sorry I did not test that enough.
For that layout to work you would have to img.mainbg.bot.png, img.mainbg.botleft.png and img.mainbg.botright.png in a footer.