PDA

View Full Version : Footer not appearing on bottom


es.
04-12-2007, 02:33 PM
I've created a rigid website design with 3 columns and a header and footer but the footer is replacing the right hand column when I want it at the bottom. Can anyone help please? Hear is the link to my page.

http://ericisonline.co.uk/learn07/3%20solid.test.htm

Thank you.

domedia
04-12-2007, 02:36 PM
welcome to the forums es.
If you want things to appear below floated elements, you need to clear the floats. Add clear: left; to your #footer.

Took the liberty of changing your thread title as well to something meaningful ;)

es.
04-12-2007, 02:50 PM
Thanks for welcoming me, i'm just learning dreamweaver and most sources i've looked at havn't helped much but that works. Also its left my right hand column in the same place, is the due to me adding padding to each column but not changing the fixed width?

domedia
04-12-2007, 03:42 PM
Update the page and I'll have a look at it.

chriskq
04-13-2007, 05:50 AM
not quite right.
when u float elements (divs) next to eachother you have to clear when u want to start on a new line.

you have :

<div id="frame">

<div id="contentheader">Header
</div>

<div id="contentleft">LEFT
</div>

<div id="contentcenter">CENTER
</div>
<div id="contentright">RIGHT
</div>

<div id="footer">footer
</div>
</div>

when it should be like this:

<div id="frame">

<div id="contentheader">Header</div>

<div id="contentleft">LEFT</div>
<div id="contentcenter">CENTER</div>
<div id="contentright">RIGHT</div>
<div style="clear:left"></div>

<div id="footer">footer</div>

</div>

i dont think its a good idea to put the clearing property on actual classes. instead let it have its own class, and call it wen needed.

you also need to read up on how to hack padding widths for firefox.
eg: you have;

#contentleft {
height:300px;
width:175px;
padding:5px;
float:left;
background-image:url(blue_stripes.jpg);
}

when it should be:


#contentleft {
height:300px;
width:175px;
padding:5px;
heigh\t: 290px;
width: 165px;
float:left;
background-image:url(blue_stripes.jpg);
}


understand what i did.
u need to minus the combined padding (5px left + 5px right) fomr the total width and height.