PDA

View Full Version : Footer misbehaving?



Frump
Sep 13th, 2010, 05:34 PM
Have been working on a new three column web page and everything appeared to be fine, except i can't get the 'footer' to behave and go where i want. I have had the web page validated. You can view the webpage Here! (http://diarco.webs.com/trial.html) Thanks

Doctor_Varney
Sep 13th, 2010, 05:56 PM
Hi Frump

It's because your footer is nested inside one of the nav columns. In Firebug, I slung it outside, to lay underneath and now it's behaving.


<div id="nav6">
<h2>Organizations</h2>
<a style="padding-left: 5px;" href="#">English FA</a><br>
<a style="padding-left: 5px;" href="#">Welsh FA</a><br>
<a style="padding-left: 5px;" href="#">FIFA</a><br>
<a style="padding-left: 5px;" href="#">Contact</a><br>
</div>

<div class="footer">The Footer Goes Here!</div> <--- It used to be here http://www.houseofx.co.uk/images/smilies/68.gif

</div>
<div class="footer">The Footer Goes here!</div> <---- And now it's here http://www.houseofx.co.uk/images/smilies/113.gif

Also, you don't need float:left on your footer. Once you've cleared the floats, you're back into flow again, so it just sits there at the bottom now, doing it's thing.


.footer {
background-color:#D4ECFB;
border:2px solid #000080;
clear:both;
float:left; <---get rid of this!
height:130px;
width:815px;
}

See?

Dr. V

Doctor_Varney
Sep 13th, 2010, 06:09 PM
Oh, and you might now want to make your footer a little wider so it looks better. I tried 99% and it seems to work nicely.

Dr. V

Frump
Sep 13th, 2010, 06:13 PM
Big thanks for the help Doctor_Varney.

Doctor_Varney
Sep 13th, 2010, 06:22 PM
My pleasure. Click the "thank button" (if you don't mind) LOL! And change prefix to: "resolved". :D:thumbsup:

Dr. V

Frump
Sep 13th, 2010, 08:35 PM
Have already clicked the thank you button and shall also click on the prefix button to show that the problem is resolved.