Understanding the CSS Float Property

Published March 18, 2010 by saurav.roy.

I want to take a moment today and talk about CSS floats. They’re used everywhere in modern web design, from navigation bars to building CSS columns and dozens of techniques in between. However, despite their prevalence, not everyone understands exactly how they work, or what the repercussions might be from using them. So let’s remedy that. You can see all the examples from this article here. Read On…

Button Height and a Broken Box Model

Published March 2, 2010 by saurav.roy.

When I figured out the workaround for line-heights in form buttons last week, I also discovered an interesting discrepancy (feature?) across all major browsers in terms of buttons and the box model. Check out this article for a more in-depth refresher on the CSS Box Model, but here’s a brief summary:

Let’s say I have a div styled like so:

div {
	height: 30px;
	padding: 10px 0; 
}

The box model states that the resulting box will take up 30px of vertical space for the div’s contents, plus an additional 10px on the top and bottom for the padding, for a total of 50px vertical space taken up by our div. Read On…