How do I do the css for this? - css

Question

I am new to css and this has me stumped.
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.
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?
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:
Set clear: both on the green element.
Set overflow: hidden on the parent container.
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

Answer 3

Check this out: http://jsfiddle.net/kMQbt/
Html:
<div id="parent">
<div id="purple">
purple
</div>
<div id="blue">
blue
</div>
<div id="green">
green
</div>
</div>​
Css:
#parent{
width: 960px;
background-color: grey;
float:none;
padding-bottom: 15px;
}
#purple{
width: 200px;
height: 200px;
float:left;
margin-top: 15px;
margin-left: 15px;
background-color: purple;
}
#green{
width: 930px;
height: 200px;
background-color: green;
clear: both;
margin-left: 15px;
}
#blue{
width: 715px;
float:left;
height: 300px;
margin: 15px;
background-color: blue;
}
​

Answer 4

Use clearfix and assign the class to your container is one of the way to fix your problem.
/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Answer 5

<div id="container">
<div id="main">
<div id="main_left"></div>
<div id="main_right"></div>
</div>
<div id="last"></div>
</div>
css
#container
{
width:xx;
height:xx;
background:
}
#main
{
width:xx;
height:xx;
}
#main_left{
float:left;
width:xx;
height:xx;
}
#main_right
{
float:right
width:xx;
height:xx;
}
#last
{
clear:both;
width:xx;
height:xx;
}

Answer 6

demo http://jsfiddle.net/yTUU6/
HTML
<div id="contaner">
<div id="top_left">
left box
</div>
<div id="top_right">
right box<br />
height will be changed <br />
<br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br />
</div>
<div class="clear"></div>
<div id="bottom"></div>
</div>
CSS
#contaner{
width: 100%;
height: 400px;
background: #EEEEEE;
}
#top_left{
width: 30%;
border:solid 1px;
height: 200px;
float:left;
}
#top_right{
width:69%;
float:left;
border:solid 1px red;
}
.clear{
clear: both;
}
#bottom{
height: 100px;
border: solid 1px green;
}

Answer 7

The classic way (how i learned to do it) using a clearer element in between
CSS
.clearer{
clear:both;
}
#parent{
width:500px;
background-color:#343434;
padding:10px;
color:#fff;
}
#box{
width:50px;
height:50px;
margin:10px;
float:left;
background-color:#545454;
}
#variable{
width:400px;
float:left;
}
#footer{
height:40px;
margin-top:30px;
background-color:#646464;
}
HTML
<div id="parent">
<div id="box"></div>
<div id="variable">
</div>
<div class="clearer"></div>
<div id="footer"></div>
</div>
An example here
Hope this helps