CSS Trick #1

Float clearing can be frustrating for any new front-end developer. If you don’t develop with floated elements, you should–they’re incredibly intuitive and aren’t really that complex. Here’s a great article about the float theory.

That being said, there are several ways you can clear a floated element. Most use some sort of clearfix — but here’s a better way:

Markup:

 
<div id="wrapper">
	<div id="content">
		<p>Content.</p>
	</div>
	<div id="sub-content">
		<p>Content.</p>
	</div>
</div>

CSS:

 
#wrapper{
	width:960px;
	overflow:hidden; 
}
#content{
	width:65%;
	float:left;
}
#sub-content{
	width:30%;
	float:right; 
}

That’s all there is to it. The trick here is pretty simple. It uses the width and overflow declarations on the wrapper DIV element–the resolves the issue and the wrapper now stretches around both contained DIV elements.