Responsive design is about saving time by making flexible elements that can be reused across multiple devices. Here are some tips I've learned while building fluid-width websites.

Make Use of box-sizing: border-box

With the default box model, adding a 1px border to two floats with %-based widths (e.g., 30% and 70%) breaks the layout. Your layout is now now 100% + 4px wide, which is annoyingly unhelpful. Likewise with adding em-based padding. At this point, most practical coders will sigh and add a internal wrapper div with the border they want.

While adding another div is a fine (albeit hacky) solution, there's a cleaner way to do it. box-sizing: border-box is a CSS3 property that fixes the box model for these use cases. Instead of adding padding and borders to the width of the box, it subtracts the same amounts from the space inside of the box.

Create this mixin in your CSS preprocessor of choice:

box-sizing(n = border-box)
  -webkit-box-sizing: n
  -moz-box-sizing: n
  box-sizing: n

Now you can do the following to your heart's content:

  width 40%
  float left
  border 1px solid #ddd
  padding .75em 1em

And it will only ever be 40% wide. Nice, right?

Any catches? While box-sizing is a CSS3 property, all browsers which support CSS2.1 will support box-sizing: border-box. That's every browser except IE6/7.

There's more to the world than float: left

In the early days of CSS-based design, floats were all we had to achieve creative, tableless layouts. They are–and have always been–a hacky and buggy approach, but they've also been the best tools we've had. Most designers have a Stockholme syndrome relationship with CSS floats.

Float-based layouts are fragile, prone to breaking, and require content clearing in most cases. Don't even try to do vertical alignment with variable-height floats. You'll need Javascript for that. The finicky nature of floats makes them ill-suited for the flexible, %-based world of web applications. What other options are there?

display: inline-block

Useful for more than horizontal layout menus, display: inline-block can be used in many situations in place of floats. Along with the contents of table cells, inline blocks can be vertically aligned, which leads to intriguing layout possibilities.

One caveat to inline blocks is that whitespace in HTML matters. If there's a space between two display: inline-block elements, it will render on the site.

Inline blocks are supported by all browsers except IE6/7. There is a hack available for IE6/7 support.

display: table-cell

Most designers who learned CSS in the days of XHTML validation and web standards instinctively cringe away from anything related to tables. However, the property display: table-cell does not imply any sort of relation between the content and tabular data.

Using display: table-cell turns an element's display type into a <td>, the original box-sizing: border-box element. <td>s will automatically stretch to fill the available horizontal space. It's a great way to create columns of both variable width and height. Take for example an image next to a column of text. This is possible to do with floats, but when you introduce percentage-based padding, you save time with display: table-cell.

Using display: table will turn all of an element's direct descendants into <td> types. If you're making consistent use of this, consider taking another look at your data: perhaps a real table is in order.

Display table/table-cell is supported by all browsers except IE6/7.

Alignment issues?

If you're using a CSS reset, you'll most likely encounter alignment issues using either inline-block or table-cell. There's no need to panic. Eric Meyer's Reset CSS sets all elements to vertical-align: baseline. That means elements of unequal heights will sit on a baseline instead of hanging from the top like floats.

How to fix it? For display: inline-block, you'll need to set its parent element to vertical-align: top. For display: table-cell, you'll need to set it to vertical-align: top.