Jump to content
Killersites Forums

Intuition behind 'clearing' columns to position footer


willtudorevans
 Share

Recommended Posts

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

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...