My CSS Cheat Sheet for Converting Fixed-Width into Flexible Layouts
Originally posted here. (Now tweaked and revised.)
- The first thing you should do is ask yourself, “Is this CSS absolutely necessary, or can I drop it?” See the postscript below for tips about how and when to use CSS. Usually, the best solution is, “Drop it!”
- Testing: Try Screenfly Emulator or Responsive Layout Emulator, or if both of those are being crabby, drag the right-hand edge of your window around to simulate different screen sizes.
- Replace font sizes and line heights in pixels with points or percentage. (E.g. 110% = “a little larger than the standard font size.”)
- To center an image or a paragraph horizontally, use style=”margin: 0px auto;”
- <br style=”clear:both;”> breaks you out of float-mode and usually stops things from spilling into places they don’t belong. (The “zigzaggy” stairstep effect, e.g. For that problem, put <br style=”clear:both;”> between each “step” of the staircase.)
- Convert your old fixed-width dimensions by doing a little math. Say you used to have a paragraph 250 pixels wide. Squidoo’s old column width was 590 pixels. 250 ÷ 590 = .42, so change width:250px; to width:42%;
- If all the widths of elements in a horizontal area add up to more than 100%, the last item will wrap onto the next row. This sometimes happens if you’ve got small elements like borders adding a few pixels of width to your total. In that case, trim the width of the elements you can control by 1-2% to leave more wiggle room.
- You may need to set the outermost container width to 100%. If something’s shrinking to fit, and you want it to extend to the margins, that’s what to do.
- When using percentages, you usually have to specify a paragraph or image’s size in width rather than height. Percentage of the containing area’s height is meaningless, because the bottom of the page is usually off the bottom of the screen. Percentage of the containing area’s width makes sense, because the right margin of a page is usually visible.
- The only time you dare specify height is with graphics small enough that they’re not likely to spill into the margin even on phone-sized screens. Use Dee’s handy-dandy Screenfly emulator to check.
- Let borders and rounded corners remain fixed-width (pixels). They are usually not big enough to spill over onto the margins, and they behave quite oddly when changed to percentages.
- Advanced: When doing side-by-side layouts, consider using the style attribute min-width: 200px; to say, “don’t shrink this image (or design element) smaller than 200 pixels.” On small phone screens, which are 240 or 320 pixels wide, this will force side-by-side layouts to switch to a single column, so you don’t end up with teeny tiny images. You may also set a max-width, if your images start looking silly at large sizes.
- Advanced: If you’ve got a colored or bordered paragraph containing a floated graphic and text, you will find that the floated graphic tends to spill out past the bottom of the paragraph when you switch dimensions to percentages. The best solution is to get rid of the color or border on the paragraph. But if you really, really have a good reason for the colored paragraph, this worked for me: <p style=”background-color: #eee; width:100%;”><span style=”display: block;”><img src=”blah” style=”float: left; blah blah;”>Text text text</span><br style=”clear: both;”></p>
- Advanced: 3-items-across layout for Zazzle & other affiliate items: <p style=”width: 25%; padding: 2%; margin-right: 2%; margin-bottom: 2%; text-align: center; font-size: 80%;”><a href=”productLink” rel=”nofollow” style=”text-decoration:none;”><img src=”imgURL” alt=”altname” style=”width: 90%; margin: auto;”><br>ProductName<br><b style=”margin:auto;display:block;width:60%;line-height:110%; font-size: 70%; color:#fff;background-color:#f90;border-radius: 4px; padding:2%;”>View on Zazzle</b></a></p>
Postscript: How and When to Use CSS
CSS commands, the style=”blah blah blah” part tucked inside of an HTML <tag>, let you control visual decoration and layout separately from HTML. If HTML says, “this is a hat,” CSS says, “size 10 with a red brim.” If HTML says, “this is a brick,” CSS says, “move it two inches to the right.” If HTML says, “this is a paragraph,” CSS says, “200 pixels wide with a dashed border and gray background.”
People tend to use CSS for decoration, but in fact, it’s better to use CSS only to indicate units of the page that function in a special way.
For example, adding color to links is more than mere decoration; it informs the reader that these words are links. A side-by-side display of product images with captions under them acts like a store display, telling the visitor, these are products, and allowing the customer to compare, browse, pick and choose. It’s functional, not just for pretty.
I have mostly avoided using colored or shaded paragraphs except for one special purpose: quotations or excerpts, when I’m alternating between quoting something and commenting on it. What’s the function of that CSS? Its purpose is to make clear which words are mine, which words are someone else’s. And I’m only going to do that on a page where I’m alternating between the two, not a simply one-off quotation or occasional quotes.
I also use CSS for navigation elements, on rare occasions. Usually, the navigation options like the “Table of Contents” in the introduction module are adequate, and don’t need to be replaced.
I wasn’t always this strict about CSS. So in reviewing old lenses, I’ve been asking myself, “Is this CSS providing useful information to the reader? Is it functional? Or is it just a paint job?” I’m dropping 99% of my “decorative” CSS. That very especially includes colored and bordered paragraphs, which are the web equivalent of a reader marking a book’s text with colored highlighter pens and underlines.