willtudorevans Posted November 28, 2011 Report Share Posted November 28, 2011 Hi guys, Whilst I'm learning CSS, I'm also trying to understand it. Why certain code does what it does. Something I can't get my head around though is the code: HTML: <div class = "clear"> </div> CSS .clear {clear: both;} I used this to get my footer to the bottom of the page beyond my two columns (it didn't before). I placed it after the divs for my columns. Apparently this is necessary when you float the columns above it. Can someone please explain to me why the footer gets out of place and how this code resolves it? Many thanks Percy Quote Link to comment Share on other sites More sharing options...
Wickham Posted November 28, 2011 Report Share Posted November 28, 2011 (edited) Floated divs don't give their height to a parent container div, so a following unfloated div like a footer will move up over floated divs until it hits something that isn't floated. So a clear div (which is unfloated) after the floated divs keeps lower content down below the floated divs. In fact there are two uses for a clear div, positioned after the floated divs but just before the </div> of the container will drag down the background of the container to the bottom of the floated divs. Items 2a and 2b explain this effect on backgrounds:- http://www.wickham43.net/firefoxbackground.php A clear div positioned after the floated divs and just after the </div> of the container above will keep lower divs in their place without affecting the background of the container above. Edited November 28, 2011 by Wickham Quote Link to comment Share on other sites More sharing options...
grabenair Posted November 28, 2011 Report Share Posted November 28, 2011 Just a little side note, to shorten your code in your CSS you can: #footer { clear: both; } I add this to every footer wither I need to clear a left or right or both, float. I just clear both as a habit just to make sure that I have it covered and do not forget as I am writing my CSS and do not have to go back and fix it. It has become such a habit that I catch myself doing it on sites where I do not even have a floated content. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.