jegranet Posted January 26, 2012 Share Posted January 26, 2012 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 More sharing options...
Ingolme Posted January 26, 2012 Share Posted January 26, 2012 Why are you floating the footer?If you want it below all your columns, you should add "clear: both" to the CSS. Link to comment Share on other sites More sharing options...
jegranet Posted January 27, 2012 Author Share Posted January 27, 2012 Thank you for responding. I have taken out the float left, but there is no change to the positioning. Link to comment Share on other sites More sharing options...
Ingolme Posted January 27, 2012 Share Posted January 27, 2012 Without the HTML context, all I can do it make guesses as to what's going on. Even better if you can show the actual page online. Link to comment Share on other sites More sharing options...
jegranet Posted January 27, 2012 Author Share Posted January 27, 2012 http://www.town-and-country-living.co.uk The accompanying html is: <div id="footnav">© Copyright Jegranet.com 2012 <br> All rights reserved</div>Thanks. Link to comment Share on other sites More sharing options...
jegranet Posted January 27, 2012 Author Share Posted January 27, 2012 Sorry wrong link: http://www.town-and-country-living.com Link to comment Share on other sites More sharing options...
Ingolme Posted January 27, 2012 Share Posted January 27, 2012 Your problem is that your footer is inside the right column. Take the footer <div> outside of the <div id="main"> Link to comment Share on other sites More sharing options...
jegranet Posted January 29, 2012 Author Share Posted January 29, 2012 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 More sharing options...
Ingolme Posted January 29, 2012 Share Posted January 29, 2012 I would not use position at all. Just let it flow naturally. Remove all the positioning properties from the footer. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2012 Share Posted January 29, 2012 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 More sharing options...
jegranet Posted January 29, 2012 Author Share Posted January 29, 2012 Thanks guys. Check out the link now. I have removed the positioning and it is now at the top underneath the main and sidebar. http://www.town-and-country-living.com Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2012 Share Posted January 29, 2012 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 More sharing options...
jegranet Posted January 29, 2012 Author Share Posted January 29, 2012 Thank you very much. It looks great now. I did do what you said earlier, however it looks terrible in Dreamweaver. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2012 Share Posted January 29, 2012 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 More sharing options...
jegranet Posted January 29, 2012 Author Share Posted January 29, 2012 I have tested it in FF and Chrome as well as IE9. All looking good. Much appreciated. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.