Footer Problem In CSS Layout

omb2012 · 10-06-2012, 09:27 PM

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;
}

stevenmw · 10-06-2012, 09:54 PM

It is your  tags.

Either remove them, or add this to your CSS.

Code:

p {
margin-bottom: 0px;
}

omb2012 · 10-06-2012, 10:02 PM

Thank you. That fixed the problem. Do I still need to use the overlay:hidden for the body wrapper since I fixed the p tag? Also, do I need to set margin bottom on future p tags to 0? Trying to understand why that would mess up the layout.

Also, I want to add 3 boxes within the main content. I'm thinking it would be easier to use tables since I want a header, middle content, and link in each box. If you know a source that will explain how to do this in css, that would be great.

Lastly, do my codes look alright from what you see? Sorry is I'm asking too many questions.

stevenmw · 10-06-2012, 10:13 PM

Yes, use overflow:hidden.

Placing

Code:

p {
margin-bottom: 0px;
}

in your CSS effects all  tags.

Wherever you call it will have a margin-bottom. You can add other elements to the CSS

Code:

p {
margin-bottom: 0px;
font-family: verdana;
font-size: 1em;
}

If you want a special then you could always create a special for a certain div.

Say you have a div named blue and you want every tag to act a certain way inside the blue div. You could use this

Code:

blue p {
font-size: 12px;
}

http://www.ozzu.com/html-tutorials/t...rt-t85704.html

fireplace_tea · 10-06-2012, 10:21 PM

Do a Google search on "CSS Reset". It's purpose is to reset all browser built in style sheets so your layout works how you want it to.