art(is)garbage
09-06-2008, 11:15 AM
So I'm working on a layout that is vertically huge, and the idea is to have the main DIV anchored to the bottom left of the browser window and prevent vertical scrolling. The only way I have found to do this is to make nested DIVs with 100% height, using relative positioning for the parent DIV , absolute positioning for the child and the additional property of bottom:0 ; This works fine with Internet Explorer, but I can't seem to get it working in Fox. Did some euGooglizing and found that adding the CSS property height:100% to both the HTML and BODY tags would satisfy Firefox... perhaps I am doing something wrong. Would deeply appreciate any suggestions, or examples where this type of layout is used.
Here's the code :
<body>
<div id="main">
<div id="main_position">
<div id="row_head">
<div id="head-top_stretch"></div>
<div id="head-main">
<div id="head-main_flash"></div>
<div id="head-main_right"></div>
</div>
</div>
<div id="row_flash"></div>
<div id="row_feeds"></div>
<div id="row_footer"></div>
</div>
</div>
</body>
CSS :
@charset "utf-8";
@import "all.css";
html{
height:100%;
width: 100%;
}
body {
background-image: url(../images/main-bgTile.gif);
background-repeat: repeat;
margin:0;
padding:0;
height:100%;
width:100%;
vertical-align:bottom;
overflow: hidden;
}
#main {
font-family: Arial, Helvetica, sans-serif;
width:901px;
height:100%;
float:left;
padding:0px;
margin:0px;
border: 0px;
position: relative;
}
#main_position {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
}
#row_head {
width: 901px;
height:1588px;
float:left;
padding:0px;
margin:0px;
background-position: top left;
}
#head-top_stretch {
width: 901px;
height: 1500px;
float: left;
padding:0px;
margin:0px;
background-image: url(../images/main-topStretch.jpg);
background-repeat: repeat-y;
}
#head-main {
width: 901px;
height: 88px;
float: left;
padding:0px;
margin:0px;
}
#head-main_flash {
width: 441px;
height: 88px;
float: left;
padding:0px;
margin:0px;
background-image: url(../images/main-topLFlashBG.jpg);
background-repeat: no-repeat;
}
#head-main_right {
width: 460px;
height: 88px;
float: left;
padding:0px;
margin:0px;
background-image: url(../images/main-topRBG.jpg);
background-repeat: no-repeat;
}
#row_flash {
width: 901px;
height: 618px;
float: left;
padding: 0px;
margin: 0px;
background-image: url(../images/main-flashBG.jpg);
background-repeat: no-repeat;
}
#row_feeds {
width: 901px;
height: 268px;
float: left;
margin: 0px;
padding: 0px;
background-image: url(../images/main-feedsBG.jpg);
background-repeat: no-repeat;
}
#row_footer {
width: 901px;
height: 26px;
float: left;
margin: 0px;
padding: 0px;
background-image: url(../images/main-footerBG.jpg);
background-repeat: no-repeat;
}
I also tried with :
#main {
font-family: Arial, Helvetica, sans-serif;
width:901px;
height:2500px;
float:left;
padding:0px;
margin:0px;
border: 0px;
position: relative;
}
#main_position {
width: 100%;
height: 2500px auto;
position: absolute;
bottom: 0;
}
Here's the code :
<body>
<div id="main">
<div id="main_position">
<div id="row_head">
<div id="head-top_stretch"></div>
<div id="head-main">
<div id="head-main_flash"></div>
<div id="head-main_right"></div>
</div>
</div>
<div id="row_flash"></div>
<div id="row_feeds"></div>
<div id="row_footer"></div>
</div>
</div>
</body>
CSS :
@charset "utf-8";
@import "all.css";
html{
height:100%;
width: 100%;
}
body {
background-image: url(../images/main-bgTile.gif);
background-repeat: repeat;
margin:0;
padding:0;
height:100%;
width:100%;
vertical-align:bottom;
overflow: hidden;
}
#main {
font-family: Arial, Helvetica, sans-serif;
width:901px;
height:100%;
float:left;
padding:0px;
margin:0px;
border: 0px;
position: relative;
}
#main_position {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
}
#row_head {
width: 901px;
height:1588px;
float:left;
padding:0px;
margin:0px;
background-position: top left;
}
#head-top_stretch {
width: 901px;
height: 1500px;
float: left;
padding:0px;
margin:0px;
background-image: url(../images/main-topStretch.jpg);
background-repeat: repeat-y;
}
#head-main {
width: 901px;
height: 88px;
float: left;
padding:0px;
margin:0px;
}
#head-main_flash {
width: 441px;
height: 88px;
float: left;
padding:0px;
margin:0px;
background-image: url(../images/main-topLFlashBG.jpg);
background-repeat: no-repeat;
}
#head-main_right {
width: 460px;
height: 88px;
float: left;
padding:0px;
margin:0px;
background-image: url(../images/main-topRBG.jpg);
background-repeat: no-repeat;
}
#row_flash {
width: 901px;
height: 618px;
float: left;
padding: 0px;
margin: 0px;
background-image: url(../images/main-flashBG.jpg);
background-repeat: no-repeat;
}
#row_feeds {
width: 901px;
height: 268px;
float: left;
margin: 0px;
padding: 0px;
background-image: url(../images/main-feedsBG.jpg);
background-repeat: no-repeat;
}
#row_footer {
width: 901px;
height: 26px;
float: left;
margin: 0px;
padding: 0px;
background-image: url(../images/main-footerBG.jpg);
background-repeat: no-repeat;
}
I also tried with :
#main {
font-family: Arial, Helvetica, sans-serif;
width:901px;
height:2500px;
float:left;
padding:0px;
margin:0px;
border: 0px;
position: relative;
}
#main_position {
width: 100%;
height: 2500px auto;
position: absolute;
bottom: 0;
}