Jump to content

Positioning the' footer'


jegranet

Recommended Posts

I am trying to build my first website without tables. I am achieving a measure of success, however am having a little trouble with the footer. I want it to stay at the bottom no matter how much text there is on the page. This is the css I have put in. #footnav { width:900px; float:left; background-color:#000000; position:fixed; clear:both; text-align:center; font-size:85%; bottom:0; line-height:140%; color:#FFFFFF; }The result so far is that it is sitting under the main column (it is a two column site), rather than under both columns. So it seems to be treating the second column as left rather than the first column.Hope someone can spot the error. Many thanks.Jean

Link to comment
Share on other sites

Sorry for not responding very quickly. I have visitors. Thank you for your help with this, I would never have spotted that error. It is now fixed at the bottom of the screen in the right place, but I was hoping to have it at the bottom of the page. I have tried 'absolute' and 'relative' but they move it elsewhere but where it should be. Have I left some code out to do that? If that is not possible without a table, then I am happy to leave it as it is.

Link to comment
Share on other sites

steer away from darkside of using positioning (but not completely, in some circumstances it maybe the only way), and stick with float, margin, padding instead.

#nav {	/*float: left; removed by dsonesuk*/ 	margin: 7px 0; /* margin:0;   amended by dsonesuk*/	overflow: hidden; /*required to wrap round floated elements added by dsonesuk*/	/*position: absolute;	top: 158px; removed by dsonesuk*/width: 100%;}#sidebar {	background-color: #FFFFFF;	border-color: #000000;	border-style: groove;	border-width: medium;	float: left;	font-family: Verdana,Arial,Helvetica,sans-serif;	font-size: 80%;	font-weight: normal;	padding: 0;	/*position: absolute;	top: 188px;  removed by dsonesuk */	vertical-align: top;	width: 200px;}#main {	background-color: #FFFFFF;	border-color: #000000;	border-style: groove;	border-width: medium;	font-family: Verdana,Arial,Helvetica,sans-serif;	font-size: 80%;	font-weight: normal;	margin-left: 217px;	/*position: absolute;	top: 188px;  removed by dsonesuk */	vertical-align: top;	/*width: 679px;   removed by dsonesuk */}remove both <br> at bottom

Link to comment
Share on other sites

That's because of the position: absolute; elements using this occupy no space, so other elements will fill this unoccupied space, that is one of the problems with using positioning for layout. With the styling i supplied this will never happen and the footer will adjust to main content, by removing any of the position: absolute used, the footer will place itself underneath that element.

Link to comment
Share on other sites

Never, eve!r go by what is shown in dreamweaver, it never gives a true representation of what you see in a actual browser, make sure you test it in FF and IE browsers, if it looks similar in both of those it will 99.99% look the same in other browsers, EXCEPT for CSS3 styling in IE.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...