0

My webpage has a footer with 4 separate footer cols. They are separated by a 5px margin on the right and left side. They also have a green background. The Footer (containing element) has a red background but does not appear. I validated the HTML and could not find a problem with XHTML markup so I'm assuming it's a CSS woe.

Fiddle: http://jsfiddle.net/48dk6/

Footer CSS declarations. 

/* footer and descendants */ #footer { font-size:1.3em; margin-top:10px; clear:both; background-color:red; } /* footer col styling/positioning */ .footerCol { background-color:green; width:180px; float:left; margin:10px 5px 10px 5px; }
Improve this question
1
  • Because your footerCol are floating, make your #footer float and issue solved Commented May 29, 2014 at 19:41

5 Answers 5

Reset to default
4

Add overflow:auto to your #footer CSS:

#footer { font-size:1.3em; margin-top:10px; clear:both; background-color:red; overflow:auto; }

jsFiddle example

This will restore the behavior you seek, which is caused by the children .footerCol divs being floated. Floating those child divs removes them from the normal flow, so the parent behaves as if there is nothing for it to contain.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, mind giving me a small explanation?. For what I know overflow handles elements that are larger than the containing element.
See developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats. It has to do with the block formatting context created by the floats.
1

Add overflow: auto; to #footer.

When you float items inside a block element you often want to use overflow: auto or else the enclosing element gets whacky and won't show up unless you specify a height and width (which you usually don't want to do)

#footer { font-size: 1.3em; margin-top: 10px; clear: both; background-color: red; overflow: auto; }
Improve this answer

Comments

0

In fact, you should have a height set for your footer, see jsFiddle

height:240px;
Improve this answer

Comments

0

JSFiddle:

http://jsfiddle.net/48dk6/6/

Remove the floating and simply display the elements as inline-blocks

 .footerCol { background-color:green; width:180px; display: inline-block; margin-left: 5px; margin-top: 10px; margin-bottom: 10px; }
Improve this answer

Comments

0

The containing floats problem can be solved with 2 approaches:

  1. Adding something with clear after the floats (the most common solution is clearfix with clearing pseudo element).
  2. Making the container create new Block Formatting context. The most popular ways are setting to the container overflow:hidden/auto, display:table, display:inline-block (+ width, if necessary), or floating the container itself.

All approaches have their advantages and limitations, so choose what fits better in your case.

There is a proposal to add min-height:contain-floats value to solve this, but it isn't supported by browsers yet.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.