How do I do the css for this?

Question

I am new to css and this has me stumped.

1. How do I get the parent div to always contain its children? As soon as I start using floats for alignment the parent stops containing children.
2. I actually do not want to float things. I want to align them. How do we do alignments and margins in css and not yet hardcode all dimensions?
3. Can someone kindly profive the css for this? Lets assume for the sake of this example that the total width is 960px and all margins are 15px;

Answer 1

Three alternatives:

1. Set clear: both on the green element.
2. Set overflow: hidden on the parent container.
3. Use clearfix on the parent container.

Answer 2

Let's see a clear and flexible version:

#container { background: gray; overflow: hidden; padding: 15px; }
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; } 
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 } 
#footer { background: green; height: 50px; clear: left; } 

Even the width and height you see set is unnecessary, boxes can adjust to their content when omitted, I just added them for demo purposes.

• jsFiddle Demo
• overflow: hidden affecting layout
• Chris Coyier: All About Floats