Hi everyone, I'm new to CSS and decided to create my first website as a test of what I could accomplish. Spent hours working on it and things look okay except for the footer. It doesn't reach all the way down to the page or main wrapper.
I eliminated the footer and when I did this, the main wrapper background disappeared. I had to use overflow:hidden to make it come back. Then I re-added the footer and it still isn't positioned properly. I haven't uploaded this to the Internet since it is a test site.
Here's the html code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="style2.css" rel="stylesheet" type="text/css"><title>Website</title>
<script type="text/javascript">
<!--
(function() {
var IE = /*@cc_on!@*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-972339418")) {
document.getElementById("af-form- 972339418").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-972339418")) {
document.getElementById("af-body- 972339418").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-972339418")) {
document.getElementById("af-header- 972339418").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-972339418")) {
document.getElementById("af-footer- 972339418").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>
</head><body>
<div class="main_wrapper">
<div class="header"></div>
<div class="body_wrapper">
<h1>This is Dummy Text</h1>
<p>Morbi magna tellus, lacinia nec adipiscing auctor, hendrerit at dui. Donec sit amet bibendum leo. Etiam
venenatis nulla in leo faucibus malesuada. Integer a ipsum ultrices purus fringilla laoreet nec in odio. Etiam
adipiscing sagittis tellus, ut dictum elit suscipit et. Donec nec arcu justo, vitae tempus erat. Suspendisse eros
orci, faucibus nec eleifend eget, tristique quis lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In in est augue, sed venenatis dui. Sed non ante eu magna faucibus dictum. Proin vehicula sodales auctor.</p>
<span class='st_sharethis_hcount' displayText='ShareThis'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_googleplus_hcount' displayText='Google +'></span>
<span class='st_email_hcount' displayText='Email'></span>
<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-96405ef1-4971-e0f0-8a3f-22a2fe88546"});</script>
<hr>
<div class="autoresponder_box">
<div><img src="autoresponderimgbnnr.png"></div>
<div class="autoresponder_two"><form method="post" class="af-form- wrapper"
action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="972339418" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="foss2" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text"
id="redirect_42c7c1c44d8730b591d16da6bc75a8a8" />
<input type="hidden" name="meta_adtracking" value="eSurveyProfits" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-972339418" class="af-form"><div id="af-body- 972339418" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-40540462">Enter Your Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field- 40540462" type="text" name="email" value=""
tabindex="500" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" id="af-submit-image-972339418" type="image" class="image" style="background: none;"
alt="Submit Form" src="http://www.aweber.com/images/forms/minimal/white/button.png" tabindex="501" />
<div class="af-clear"></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center"><p>We respect your <a title="Privacy Policy"
href="http://www.aweber.com/permission.htm" target="_blank">email privacy</a></p>
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=nOxMzMycLIwc" alt="" /></div>
</form></div>
</div>
<div class="body_footer_navigation"><a href="#">Return Home</a> | <a href="#">Return
to the Top</a></div>
</div>
<div class="sidebar_main_wrapper">
<div class="left_sidebar">
<div class="main_navigation">
<h2 class="headbar">Navigation</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">Free Paid Survey Directory</a></li>
<li><a href="#">Paid Survey Reviews</a></li>
<li><a href="#">Paid Survey Articles</a></li>
<li><a href="#">Focus Groups</a></li>
<li><a href="#">Get Paid To</a></li>
<li><a href="#">FAQs</a></li>
</ul>
<h2 class="headbar">Survey Panel of the Month</h2>
<center><a href="http://www.mb01.com/lnk.asp? o=3348&c=43374&a=54741"><IMG SRC="http://www.mb01.com/getimage.asp?
m=2414&o=3348&i=43374.dat" width=160 height=600 border=0></a></center>
</div>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Disclaimers</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<p>This is our text in the footer</p>
</div>
</div>
</body></html>
Here's the CSS code:
Code:
body {
background-color : #51abff;
font-family : Arial, Tahoma, verdana;
font-size : 16px;
}
.main_wrapper {
margin : auto;
width : 900px;
background-color: #fff;
clear : both;
overflow: hidden;
}
.header {
background-image : url(Images/esurvey.png);
background-repeat : no-repeat;
background-position : top center;
height : 90px;
}
.body_wrapper {
width : 580px;
float : right;
padding-right : 20px;
}
.autoresponder_box {
float : left;
width : 600px;
}
.autoresponder_box img {
float : left;
width : 400px;
}
.autoresponder_two {
float : right;
width : 200px;
margin-top : 25px;
}
.body_footer_navigation {
width : 600px;
text-align : center;
padding : 5px;
margin : auto;
}
.sidebar_main_wrapper {
width : 300px;
float : left;
margin : 0;
}
.left_sidebar {
width : 275px;
margin : 10px;
}
.headbar {
font : bold 14px Verdana;
color : white;
background : url(Images/titlebar.png) center left repeat-x
black;
margin-bottom : 10px;
padding : 4px 0 4px 10px;
}
.main_navigation {
width : 260px;
}
.main_navigation ul {
list-style-type : none;
margin : 0;
padding : 0;
margin-bottom : 8px;
}
.main_navigation ul li {
padding-bottom : 2px;
}
.main_navigation ul li a {
color : #4189cc;
background : url(Images/arrowbullet.png) center left no-repeat;
display : block;
padding : 2px 0;
padding-left : 19px;
text-decoration : none;
font-weight : bold;
border-bottom : 1px solid #dadada;
font-size : 95%;
}
.main_navigation ul li a:visited {
color : #00743a;
}
.main_navigation ul li a:hover {
color : #00743a;
background-color : #f3f3f3;
}
.footer {
clear: both;
background-color:#065306;
text-align:center;
}
.footer ul {
list-style: none;
}
.footer ul li {
display: inline;
text-decoration: none;
padding-top: 8px;
margin: 5px;
}
.footer ul li a {
text-decoration: none;
color: white;
}
#af-form-972339418 .af-body .af-textWrap {
width : 98%;
display : block;
float : none;
}
#af-form-972339418 .af-body .privacyPolicy {
color : #000000;
font-family : Trebuchet MS, sans-serif;
}
#af-form-972339418 .af-body a {
color : #9e9b9b;
font-style : normal;
font-weight : normal;
}
#af-form-972339418 .af-body input.text, #af-form-972339418
.af-body textarea {
background-color : #f0f0f0;
border-color : #dbdbdb;
border-style : solid;
color : #000000;
text-decoration : none;
font-weight : normal;
font-size : 14px;
font-family : Trebuchet MS, sans-serif;
}
#af-form-972339418 .af-body input.text:focus, #af-form-
972339418 .af-body textarea:focus {
background-color : #ebebeb;
border-color : #c4c4c4;
border-style : solid;
}
#af-form-972339418 .af-body label.previewLabel {
display : block;
float : none;
text-align : left;
width : auto;
color : #000000;
font-style : normal;
font-weight : normal;
font-family : Trebuchet MS, sans-serif;
}
#af-form-972339418 .af-body {
padding-bottom : 7px;
background-repeat : repeat-y;
background-position : center left;
background-image : none;
color : #000000;
font-size : 11px;
}
#af-form-972339418 .af-quirksMode {
padding-right : 15px;
padding-left : 15px;
}
#af-form-972339418 .af-standards .af-element {
padding-right : 15px;
}
#af-form-972339418 .buttonContainer {
text-align : center;
}
#af-form-972339418 button, #af-form-972339418 input, #af-form-
972339418 submit, #af-form-972339418 textarea, #af-form-
972339418 select, #af-form-972339418 optgroup, #af-form-
972339418 option {
float : none;
position : static;
margin : 0;
}
#af-form-972339418 div {
margin : 0;
}
#af-form-972339418 form, #af-form-972339418 textarea, .af-form-
wrapper, .af-form-close-button, #af-form-972339418 img {
float : none;
color : inherit;
position : static;
border : none;
margin : 0;
padding : 0;
}
#af-form-972339418 input, #af-form-972339418 button, #af-form-
972339418 textarea, #af-form-972339418 select {
font-size : 100%;
}
#af-form-972339418 select, #af-form-972339418 label, #af-form-
972339418 optgroup, #af-form-972339418 option {
padding : 0;
}
#af-form-972339418, #af-form-972339418 .quirksMode {
width : 185px;
}
#af-form-972339418.af-quirksMode {
overflow-x : hidden;
}
#af-form-972339418 {
background-color : #ffffff;
border-color : #e3e3e3;
border-style : none;
}
#af-form-972339418 {
display : block;
}
#af-form-972339418 {
overflow : hidden;
}
.af-body .af-textWrap {
text-align : left;
}
.af-body input.image {
border : none !important ;
}
.af-body input.submit, .af-body input.image, .af-form .af-
element input.button {
float : none !important ;
}
.af-body input.text {
width : 100%;
float : none;
padding : 2px !important ;
}
.af-body.af-standards input.submit {
padding : 4px 12px;
}
.af-clear {
clear : both;
}
.af-element label {
text-align : left;
display : block;
float : left;
}
.af-element {
padding : 5px 0;
}
.af-form-wrapper {
text-indent : 0;
}
.af-form {
text-align : left;
margin : auto;
}
.af-quirksMode .af-element {
padding-left : 0 !important ;
padding-right : 0 !important ;
}
.lbl-right .af-element label {
text-align : right;
}