Exercise : Float Boxes (by Alex Miller)

Generate the following page appearance, starting from this HTML and CSS code.

Exercise starter code

<div id="outer">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>        
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

#outer {
	border: 2px dashed black;
	padding: 10px;
}

.box {
	width: 100px;
	height: 100px;
	background-color: black;
	margin: 10px;
}

Exercise solution

<div id="outer">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box break"></div>  
	<div class="box"></div>
	<div class="box"></div>
</div>

#outer {
	border: 2px dashed black;
	overflow: hidden;
	padding: 10px;
}
.box {
	width: 100px;
	height: 100px;
	background-color: black;
	margin: 10px;
	float: left;
}
.break {
	clear: left;
}