/* Float vs Display: Inline-block */
body {
	font-family: arial, helvetica, sans-serif;
}

#principal {
	width: 800px;
	padding: 20px;
	border: 2px solid #3498DB;  /* dashed */
	margin: 20px auto;
	color: 888888;
}

div {
	padding: 30px 0;
	text-align: center;
	width: 25%;
	/*float: left;*/
	display: inline-block; /* elementos se comportan como texto */
}

#div1 { background: #FFCC00; }
#div2 { background: #99FFAA; }
#div3 { background: #AADDFF; }
#div4 { background: #EEAAFF; }
/*	p { clear: both; } /* evita acplamiento ( cuando se usa float)*/