No replies
nordinbobbe
nordinbobbe's picture
Offline
newbie
Last seen: 9 years 22 weeks ago
Timezone: GMT+1
Joined: 2011-02-11
Posts: 1
Points: 2

beginner, so bear(?) with me... (not english speaking, so bear with me there as well)

im having trouble with this css layout. i have set the "#bodywrapper" div to fill the browser window and i also managed to place and lock the footer at the bottom of the page. problem is that if i minimize the browser the "#bodywrapper" div and the footer wont be placed in the bottom as i scroll the page.

here's the css:

* { padding: 0; margin: 0; height: 100%; }
 
 body {
 margin: 0 auto;
 padding: 0;
 background-color: #3ec2f3;
 height: 100%;
 position: relative;
}
#bodywrapper {
 margin: 0 auto;
 width: 1200px;
 background-image: url(../pix/body_background.jpg);
 border: 1px solid #ccc;
 min-height: 100%;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
 height: 100%;
 border: 0px solid #ccc;
}
#header {
 width: 900px;
 height: 166px;
 color: #fff;
 padding: 10px;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
 background: transparent;
}
#slideshow {
 width: 900px;
 height: 100;
 color: #fff;
 padding: 10px;
 border: 1px solid #ccc;
 height: 125px;
 margin: 0px 0px 0px 0px;
 background: transparent;
}
#navigation {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 height: 66px;
 margin: 0px 0px 0px 0px;
 background: transparent;
 background-image: ;
 background-repeat: no-repeat;
 background-position: center top;
}
#content { 
 width: 900px;
 height: 66px;
 color: #333;
 border: 1px solid #ccc;
 background: transparent;
 margin: 0px 0px 0px 0px;
 padding: 10px;
}
 #footer {
 padding-top: 10px;
 padding-bottom: 10px;
 border: 0px solid #ccc;
 background: #fff;
 height: 8px;
 margin: -30px 0 0;
 width: 100%;
 clear: both;
 position: static;
}

and here is the html:

<BODY>
 
<bgcolor="black"><body link="black" vlink="black" alink="grey">
 <body leftmargin="0" topmargin="0">
  <font face="verdana" size="1" color="black">
 
			<!-- Begin Body Wrapper (WILL NOT SCROLL) -->
			<div id="bodywrapper">	
 
	<!-- Begin Wrapper -->
	<div id="wrapper">
 
<!-- Begin Header -->
<div id="header">
 
<center>
<a><img src="pix/logo.png"></a>
</center>
 
</div>
<!-- End Header -->
 
<!-- Begin Navigation -->
<div id="navigation">
 
</div>
<!-- End Naviagtion -->
 
<!-- Begin Slideshow -->
<div id="slideshow">
 
</div>
<!-- End Slideshow -->
 
<!-- Begin Content -->
<div id="content">
<center>
 
</center>
 
</div>
<!-- End Content -->
 
	</div>
	<!-- End Wrapper -->
 
			</div>
			<!-- End Body Wrapper -->
 
				<!-- Begin Footer (WILL NOT SCROLL)-->
				<div id="footer">
 
				<center>
				<p>- © Real Team 2011 -</p>
				</center>
 
				</div>
				<!-- End Footer -->
</BODY>
</html>

bee free to mock the coding and all but PLEASE help me!