Jump to content

Positioning the' footer'


jegranet
 Share

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

Edited by dsonesuk
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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...