demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Layouts: Single Column Text

css / layouts
Posted heart12 comment0

Estimated. reading time: 4 minutes, 47 seconds

Single column text, no wrapIn a grid-based design, such as the one we used for Evil Incorporated, we may wish to preserve the rectilinear layout by placing the paragraph text into its own column, separate from our image. While allowing paragraphs to wrap under the image makes the best use of available space, it may be more appropriate (particularly if there is little text content) to keep everything in a grid while remaining true to the principles of fluid design.

There are a few possible ways to approach this. For the Evil Incorporated design, the simplest method would be to increase the margin-right on the paragraphs:

p { font-family: Baskerville, Times, serif; text-align: justify; margin-left: 5em; margin-right: 20em; }

Note that adding this significant amount of margin-right to the declaration for the paragraphs does not have the effect you might expect. Rather than being pushed 20em away from the definition list, the right side of the paragraph text is instead pushed away from the right of the body. The captioned image’s margin-left is still in place.

Why does this work in the way it does? Very simply, because the paragraphs come after the captioned image. By creating a significant margin-right, you are essentially creating a space for the definition list / captioned image to fall into when it floats to the right.

At this point, setting a min-width for the body or containing div is pretty much required.

There is another method, somewhat more complex, that defines width as a percentage for each element. There are a few issues with this:

  • You must always keep in mind that width is a portion of the width of the container
  • float may no longer work quite as expected: you may need to use margin: auto or text-align: centre to make floated elements appear the way you wish.
  • width refers to the width of the content, not that of the overall box, (at least by default) so you must allow for padding, border, outline, margin, etc.
  • mixing elements that have width expressed in % alongside those measured using other units, such as px, can get tricky.

In essence, the sum of widths expressed in percentages of elements that are side-by-side must be less than 100%. Try 45% for the paragraphs and 35% for the definition list holding our captioned image.