DIV Issue. Please Help!

[Taxgirl]

Hey,

I'm having issues w/ the right and bottom of this site...

http://www.suburbannoizerecords.com/frontpage.htm

Here's the coding


<style type="text/css">
<!--
.topleft {
position: absolute;
height: 61px;
width: 52px;
left: 0px;
top: 0px;
background-color: #000000;
background-image: url(storefront/topleft.jpg);
}
.topcenter {
position: absolute;
height: 61px;
width: 100%;
left: 52px;
top: 0px;
right: 51px;
background-color: #000000;
background-image: url(storefront/topcenter.jpg);
background-repeat: repeat-x;
}
.topright {
position: absolute;
height: 61px;
width: 51px;
top: 0px;
right: 0px;
background-color: #000000;
background-image: url(storefront/topright.jpg);
}
.centerleft {
position: absolute;
height: 100%;
width: 52px;
left: 0px;
top: 0px;
bottom: 0px;
background-color: #000000;
background-image: url(storefront/centerleft.jpg);
background-repeat: repeat-y;
}
.centerright {
position: absolute;
height: 100%;
width: 51px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #000000;
background-image: url(storefront/centerright.jpg);
background-repeat: repeat-y;
}
.bottomleft {
position: absolute;
height: 38px;
width: 52px;
left: 0px;
bottom: 0px;
background-color: #000000;
background-image: url(storefront/bottomleft.jpg);
top: 0px;
}
.bottomcenter {
position: absolute;
height: 38px;
width: 100%;
left: 52px;
right: 51px;
bottom: 0px;
background-color: #000000;
background-image: url(storefront/bottomcenter.jpg);
background-repeat: repeat-x;
top: 0px;
}
.bottomright {
background-color: #000000;
background-image: url(storefront/bottomright.jpg);
position: absolute;
height: 38px;
width: 51px;
right: 0px;
bottom: 0px;
top: 0px;
}
.storefront {
position: absolute;
height: 100%;
width: 100%;
left: 125px;
top: 160px;
right: 0px;
bottom: 0px;
overflow: visible;
}
.center {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
position: absolute;
height: 100%;
width: 100%;
left: 52px;
top: 0px;
right: 51px;
bottom: 0px;
}
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: underline;
color: #666666;
}
a:active {
text-decoration: none;
color: #990000;
}
.bottom {
position: absolute;
height: 38px;
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
overflow: visible;
}
.hori-center {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 61px;
right: 0px;
bottom: 38px;
}
.top {
position: absolute;
height: 61px;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
}
-->
</style>
<div class="storefront" id="storefront">
<div class="top" id="top">
<div class="topleft" id="topleft"></div>
<div class="topcenter" id="topcenter"></div>
<div class="topright" id="topright"></div>
</div>

<div class="hori-center" id="hori-center">
<div class="centerleft" id="centerleft"></div>
<div class="center" id="center">INSERT ALL TEXT HERE ```````!</div>
<div class="centerright" id="centerright"></div>
</div>
<div class="bottom" id="bottom">
<div class="bottomleft" id="bottomleft"></div>
<div class="bottomcenter" id="bottomcenter"></div>
<div class="bottomright" id="bottomright"></div>
</div>
</div>

Pretty much, it's supposed to be a white box (w/ the cool edges) that expands height and width wise to fit the screen (the top and left margins are set for a header and left side global navigation)

This is SOO important that I fix this today and I'd love and adore anyone that could help me MORE than you will ever know.

Please let me know if you can help.

And if you need more info contact me on AIM my screen name is taxgirlsrh or PM me or something. Please and thank you!!

[windowpane]

Hi,
I've visited you page http://www.suburbannoizerecords.com/frontpage.htm.
You considered your page as 9 parts. top-left, top-center, top-right.. I think there is no need to think it. I prepared a page that consists header and left navigation part. Main content is 100% depends on window's size. Just have a look at that..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>a</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<META http-equiv="Content-Type" content="text/html; charset=windows-1254">
<style>
/* mac hide \*/
html, body {height : 100%}
/* end hide*/

body {
padding : 0;
margin : 0;
background : #C8FC98; /* it's for leftcolumn's bgcolor */
}

#maincontainer{
min-height : 100%; /* for firefox */
margin-left : 160px;
margin-bottom : -50px;
color : #000000;
background : #FDE95E; /* it's for content's bgcolor */
}

* html #maincontainer{
height : 100%; /*for ie */
}

#top{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 70px;
background : #EAEAEA;
overflow : hidden;
}

#leftcolumn {
position : relative; /*ie needs this to show float */
width : 160px;
float : left;
margin-left : -160px;
margin-top : 70px;
}

* html #leftcolumn {
margin-bottom : 50px; /*for ie */
}

#center {
width : 100%;
}

#bottom {
position : relative;
width : 100%;
clear : both;
height : 50px;
background-color : #FF8080;
text-align : center;
overflow : hidden;
}

#clearheader{
height : 72px;
}

#clearfooter{
clear : both;
height : 50px;
}

.innertube {
padding : 10px;
}
</style>
</head>

<body>

<div id="top">
<div class="innertube">
top
</div>
</div>

<div id="maincontainer">

<div id="leftcolumn">
<div class="innertube">
left<br>
</div>
</div>

<div id="clearheader"></div>

<div id="center">
<div class="innertube">
center
</div>
</div>

<div id="clearfooter"></div>

</div>

<div id="bottom">
<div class="innertube">
bottom
</div>
</div>

</body>
</html>