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.

While an Intern at Smithville, their developers turn me on to a wonderful Mac web editor I think every front-end developer should use. It’s called Coda, developed by Panic. It’s smooth, one-window approach is incredible–it’s a text editor and file transferer, packed with terminal, live preview, and a full-featured (up-to-date!) css-editor. But, that’s just the start. It has the power of Transmit, built in the space of a sidebar. Also, it has the best web preview I’ve ever seen thanks to Apple’s WebKit.

Most importantly, is it’s seemless integration with its “Sites” feature — both remotely and locally. You can make an edit to a file, and it will save both the remote file and local file–so you always have an up-date backup of your websites.

The only draw back? It’s a Mac-only program. Check it out for free!