I'm trying to learn how to work with Positioning Web-Elements in Web Design using CSS3/HTML5, to get comfortable with things like relative, absolute, etc. and how they all work together before moving onto the next step. The problem I keep running into is, that I cannot get the "footer" to go to the bottom of the page, even set at bottom: 0px. I assume this is because the default bottom of the page ends where the content ends and that I have to add some piece of code to say how large the page should be but I don't know what that is and adjusting height on the body or other elements doesn't work. I've tried: Removing all the CSS3 except for the Footer Adjusting the Height of Body to move the footer down within that Adjusting the Height of other boxes. Adding and adjusting Margins Adding and adjusting Paddings Adding <br>'s to make the space. Changing it to Absolute and manually moving it around (but when I open full screen same problem). (I use HTML5 boilerplate) removing every script, every included file, everything but the basic html and the CSS3 code, nothing seems to work. No matter what I do, adjust or change I can't figure out how to tell the program that the Footer is to be at the end of the page. Because the page default seems to be pre-set by default but I don't know where to reset that, how to define or change it. Not sure if this makes sense, but I've attached a picture of the problem. An example with colour to see more clearly: <body> <div id="header"> <header> <p>Orange Header</p> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> </ul> </nav> </header> <!--3 Picture Slide show, outline orange, next to a box with white background and paragraph. --> <div id= "banner"> <img id= "banner_picture" src="smiley.gif" alt="Banner Pic" height="42" width="42"> <p id = "banner_text"> Banner Picture: Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. </p> </div> <div id = "main"> <article class = "article_Container"> <p>Top Text, bottom Picutre: Green, Black Text, Outlined Yellow.</p> </article> <article class = "article_Container"> <p>Top Text, bottom Picutre: Green, Black Text, Outlined Yellow.</p> </article> <article class = "article_Container"> <p>Top Text, bottom Picutre: Green, Black Text, Outlined Yellow.</p> </article> </div> <footer> Orange Footer </footer> </body> HTML: /* ========================================================================== Author's custom styles ========================================================================== */ body{ background: #f0f0f0; /*background-color: #a0cd71 ;*/ font: 13px/22px Helvetica, Arial, sans-serif; /*font-family: arial;*/ } /* unvisited link */ a:link { color: #ffffff; text-decoration: none; } /* visited link */ a:visited { color: #e97a35; } /* mouse over link */ a:hover { color: #000000; background-color: #b7d304; border-radius: 8px; width: 250%; height: 250%; } /* selected link */ a:active { color: #e97a35; } /* Section I Header/Navigation Part of Website */ #header { position: relative; width: 100%; height: 100%; margin: -1px; margin-top: -12px; } header { background-color: #b88813 ; top: 100%; border-radius: 8px; height: 50px; } nav { background-color: #fcbc25 ; border-radius: 8px; position: absolute; width: 100%; height: 25px; top: 20px; bottom: 2500px; color: #ffffff; font-size: 16px; font-weight: bold; } ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline; } /* Section II Banner Part of Website */ #banner{ background: orange ; position:relative; top: 8px; left: 25%; height: 50px; width: 50%; margin-top: 19px ; } #banner_text{ float: left; /*removing float allows the txt to wrap*/ background: white; /*width:150px; height: 40%; adding this places it nxt to each other*/ } #banner_picture{ float: left; width:150px; height: 95%; background: gray; /*margin: 0 0 1em 1em;*/ } #main{ clear:both; background: white; /*overflow: auto;*/ } article{ float: left; margin: 1.858736059%; width: 29%; background: white; } /* Section III footer part of website */ footer{ clear:left; background-color: #fcbc25 ; position: relative; /*padding-bottom: 22px;*/ width: 100%; height: 10%; bottom: 0px; font-size: 16px; color: ffffff ; border-radius: 8px; } Code (CSS):
It sounds like you are looking for a "sticky footer" that stays at the bottom of the page even if there is not enough content to stretch the entire height of the page. Correct? Modern sticky footer for IE8 and up uses display: table;: http://www.pmob.co.uk/temp/sticky-footer-auto-height.htm Older sticky footer with wider browser support: http://pmob.co.uk/temp/sticky-footer-ie8new.htm Search Yahoo for "css sticky footer" and you can find more examples.