CSS Image Text Wrap
Image text wrap with sandbag divs! Have you ever heard the criticisms that claim all CSS layouts look the same? Often blocky and bland, many CSS layouts do appear more than a bit uninspired. Well I say don't blame the design tools, blame the designer. CSS offers countless presentation and page design possibilities, from simple style enhancements to complex, graphic intensive layouts. The trouble is, too many Web developers attempting their first CSS design, are still thinking with a table layout frame of mind. Unfortunately, some never leave it behind….
CSS text wrap—A river runs through it. Okay, I'm going with the river analogy here, after all, this tutorial is about text wrap around images. And, if we want our text to wrap, it has to flow right? Consider a simple html document, one with no special formatting and containing only text. The text rendered in the browser view port literally flows down the page contained only by the width of the browser window. Flowing like a river? Well, not quite. Maybe more like water in a canal: straight banks, nothing exciting.
The image & the flow: dam or breakwater? Let's toss a couple of images into the canal. We will add <img src="floatsam.jpg" /> and <img src="jetsam.jpg" />. Separate each with a paragraph or two of page text. So now what? We've added interest to the page but dammed up the river. The flowing text comes to an abrupt halt, pooling upstream of each image, only to re-appear downstream after it passes unseen over the dam.
The text flow stops here! Without specific instructions, images interrupt the flow of text when inserted into a document. Left-aligned by default, even the smallest image will stand alone guarding the empty space to its right. This is the correct behavior. An image's intrinsic height combined with the specific image placement, whether as part of an existing paragraph or inserted between paragraph elements determines how much "space" will be reserved before, after and to the right of the image.
Take me to the river! Breaching the dam with image text wrap is as easy as float! Previously the
HTML attribute align could be applied to images and other page
elements where text wrap was desired. However, the align attribute has been deprecated and has no place in current, Standards
compliant, html documents.
CSS properties offer more options and greater flexibility in
positioning page elements and controlling the flow around them. Sub-section 9.5 Floats of the
CSS 2.1 Visual formatting model provides the following definition:
A float is a box that is shifted to the left or right on the current line. The most interesting
characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be
prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down
the left side of a right-floated box.
The image to the left is "floated" to allow
text wrap and, even though the image is placed within a paragraph, the text of subsequent paragraphs will also wrap
around the float image. But what about complex images? A single image regardless of its actual shape is still using
as a two dimensional rectangle when inserted into html code and displayed by a visual user-agent. As useful as it
is to "image text wrap" it can be rather boring.
Before the advent of cascading style sheets, image wrapping text in a detailed, line by line, form following fashion, was near impossible. Table layouts certainly did not allow it and if complex table were created to mimic image wrapping text, true continuous text flow was not possible. There is a surprisingly simple method that will allow highly detailed text wrap around just about any image. Here is an example of a simple, but very effective CSS image text using only three sandbag divs Karen's Molested Apple, and another using five Starting from Zero.
Please note: Alternate style sheets are included with the pages of this tutorial. If your browser supports alternate style sheets you can view variations of these pages. You can also view screen captures of several versions: [Like a canal!] [Sophie justified] [IE Safe] and [ Bad Mozilla???]. Think floats are only for images? Guess again! CSS Float Html Tutorial PLUS! CSS image scaling made possible: CSS Image Scale Tutorial :::
NEXT: Using the sandbag div » CSS Image Text Wrap part 2
[ Return to Top of Page | Access Key list | Contact BIG BAER ]