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
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:
#announcement border-box() 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
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.
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.
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.
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 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.
If you're using a CSS reset, you'll most likely encounter alignment issues using either
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