so in my site i have a div called "main" which contained a div called "left" and one called "content" ... as you probably guessed left is for left blocks and stuff running down the side of the page, the "content" is for main content of the website.
now the problem i am having is that my "main" div does not expand to accommodate when the length (vertical) of "left" is greater then "content" .. what i mean is that if "content" is really long then everything looks perfect, the footer div is located at the bottom of the page and everything, but if "content" is short and the "left" is long, the footer appears at the bottom of "content" not at the bottom of "left".
how i have meant to write it is that my "footer" div should appear after "main", and "main" should be as long as it needs to be to fit in both "left" and "content".
after some fooling around and positioning the footer absolutely, i have found that it is my "left" div which is running over my "main" div, so my "main" div fits in the "content" div, but not the "left" div (sorry i know this is very confusing i hope you follow)
i believe this is due to my absolute positioning of my "left" div however any other positioning i could think of resulted in my "left" and my "content" either not being side by side, or not spanning the full height of the "main" div and each only spanning the height of its own contents.
can someone perhaps point out my obvious mistake and perhaps a remedy? thanks in advance zikulans!
here is my CSS
Code
@CHARSET "ISO-8859-1";
/* general page structure and layout */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
color: #000000;
background-image: URL("../images/FSNS_TilableBG.jpg");
text-align: center;
}
.container {
width: 800px;
margin: 10px auto; /* top right bottom left*/
}
.banner {
width: 100%;
height: 200px;
background-image:url('../images/FSNS_Banner.png');
}
.main {
width: 100%;
position: relative;
min-height:300px;
padding: 5px 0 5px 0;
margin: 0 0 0 0;
background-color: rgba(234, 234, 234, 0.7) !important;
background-color: rgb(234, 234, 234);
filter: alpha(opacity=70);
}
.left {
position:absolute;
left:0;
width: 150px;
height: 100%;
text-align: left;
}
.content {
border-left: 1px dashed;
margin: 0 0 0 150px;
text-align: left;
}
.admincontent {
height: 100%;
margin: 0 0 0 0;
text-align: left;
}
.contact {
margin: 0 0 0px 600px;
/* the margin from the left is the width minus the total container width*/
width: 200px;
height: 20px;
background-image:url('../images/FSNS_contact.png');
}
.contact img p{
vertical-align: middle;
}
.menu {
position:relative;
width: 100%;
height: 20px;
background-color: rgb(234, 234, 234);
background-image: url('../images/Menubar.png');
}
.footer {
width:100%;
height:53px;
background-image: url('../images/BottomBanner.png');
}
img {
border:none;
}
a {
color:#000000;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:none;
}
/* general page structure and layout */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
color: #000000;
background-image: URL("../images/FSNS_TilableBG.jpg");
text-align: center;
}
.container {
width: 800px;
margin: 10px auto; /* top right bottom left*/
}
.banner {
width: 100%;
height: 200px;
background-image:url('../images/FSNS_Banner.png');
}
.main {
width: 100%;
position: relative;
min-height:300px;
padding: 5px 0 5px 0;
margin: 0 0 0 0;
background-color: rgba(234, 234, 234, 0.7) !important;
background-color: rgb(234, 234, 234);
filter: alpha(opacity=70);
}
.left {
position:absolute;
left:0;
width: 150px;
height: 100%;
text-align: left;
}
.content {
border-left: 1px dashed;
margin: 0 0 0 150px;
text-align: left;
}
.admincontent {
height: 100%;
margin: 0 0 0 0;
text-align: left;
}
.contact {
margin: 0 0 0px 600px;
/* the margin from the left is the width minus the total container width*/
width: 200px;
height: 20px;
background-image:url('../images/FSNS_contact.png');
}
.contact img p{
vertical-align: middle;
}
.menu {
position:relative;
width: 100%;
height: 20px;
background-color: rgb(234, 234, 234);
background-image: url('../images/Menubar.png');
}
.footer {
width:100%;
height:53px;
background-image: url('../images/BottomBanner.png');
}
img {
border:none;
}
a {
color:#000000;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:none;
}
AND here is my master.htm template, very early stages of this theme...
Code
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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="<!--[lang]-->" lang="<!--[lang]-->">
<head>
" />
/style.css" media="screen" />
<title><!--[title]--></title>
" />
" />
</head>
<body>
<div class="container">
<div class="contact"><p> <img src="../images/Aiga_mail2.gif"></img> Contact Us</p></div>
<div class="banner"></div>
<div class="menu"><!--[blockposition name='navtop']--></div>
<div class="main">
<div class="left">
<!--[blockposition name=left]-->
</div>
<div class="content">
<!--[$maincontent]-->
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
<!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="<!--[lang]-->" lang="<!--[lang]-->">
<head>
" />
/style.css" media="screen" />
<title><!--[title]--></title>
" />
" />
</head>
<body>
<div class="container">
<div class="contact"><p> <img src="../images/Aiga_mail2.gif"></img> Contact Us</p></div>
<div class="banner"></div>
<div class="menu"><!--[blockposition name='navtop']--></div>
<div class="main">
<div class="left">
<!--[blockposition name=left]-->
</div>
<div class="content">
<!--[$maincontent]-->
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
