CSS Image Text Wrap
Sandbag <div>: a special purpose "floated" <div>element</div> used for text wrap control. Most often used in groupings to induce text wrap around complex background images or sliced image sets. The resulting aggressive text wrap emulates advanced magazine layout or desktop publishing techniques.
This ain't your Mama's CSS! The sandbag div technique is surprisingly simple. It can be used to wrap text around select background images or it can be applied to induce text wrap around sliced images. The degree of text wrap detail relies basically on two things: the actual number of sandbag divs used and the font size/line height applied to the text.
Sandbag divs work because they act as guides, or "sandbags," channeling the page flow around images, or background images. Sandbag divs are assigned specific height and width values according to the image area to be "wrapped." Floated sandbag divs are stacked using the "clear" property, and, with very little effort, it is quite easy to "channel" or wrap, text around even intricate background images. The effect appears very fluid and does give the appearance of a true image text wrap. Though the technique is simple and the possibilities expansive, there are a few issues to consider.
IE & Mozilla/Netscape Float Bugs? Maybe? Maybe not. A little history: The CSS float and clear properties used to position and stack the sandbag divs were included in the initial WC3 recommendation, Cascading Style Sheets, level 1, first published on 17 December 1996. Understandably, there is to be expected a considerable time lapse between the introduction of a W3C recommendation, the published specification, and the actual implementation, if at all, by the various browser vendors.
Cascading Style Sheets, level 2 was published as a W3C recommendation on 12 May 1998. Web developers were finally beginning to consider the power of CSS and the advantages of "seperation of style from content." It's now 2003 and Web developers are studying Cascading Style Sheets, level 2 revision 1. Modern browser support while very good, is not complete. In addition to unsupported style properties, there remain a number of lingering CSS rendering bugs. Internet Explorer leaves a 3 pixel gap between stacked, floated divs, while the Mozilla/Netscape interpretation of opposing floats does not allow stacked opposing floats at all!
While the WC3 language describing expected float behavior may seen a bit amibiguous, and could leave room for multiple interpretation with regards to opposing floats, the matter can be solved simply by alternating floats, left/right, left right, instead of stacking all left then all right when coding. If this alternating method is not followed, Mozilla based browsers will render the floats as shown in this example: Mozilla stacked floats. Remember, do it like a good football offense, go left then go right!
Using sandbag divs to text wrap background images is as simple as the above example reveals. The background image of actress Sohie Marceau is added to page using the following style declaration: #content {background: #000 url("../assets/bk_sophie_marceau.jpg") no-repeat;}. In this case, the background image is applied to the #content div and not to the body element. This is done to avoid obstruction of the image by the navigation bar positioned at the top of the page; the #content div follows, and contains all the remaining page content, including the sandbag divs and text. Until backgroud-position is widely supported, use the default, top-left position, for large, non-repeating images.
Building the sandbags! To simplify things and save on page code, use CSS grouping to declare shared sandbag div declarations. This is the grouping for the left side stacked sandbags: #sml-01, #sml-02, #sml-03, #sml-04, #sml-05, #sml-06, #sml-07, #sml-08, #sml-09, #sml-10, #sml-11, #sml-12 {float:left; clear:left;}. You can add to the grouping as you build, or begin with an estimated number, either way this leaves only the relavent width and height declarations to be assigned to the individual selectors: #sml-01 {width: 320px; height: 60px;}, #sml-02 {width: 340px; height: 35px;}, #sml-03 {width: 365px; height: 32px;} and so on. Visually configuring your sandbag divs will be easier if a temporary border is applied to each new div. This can be added to the earlier assembled grouping: #sml-01,#sml-02,#sml-03,… {float:left; clear:left; border: 1px solid #0f0;} and removed after the sandbags are in place.
How wide? How high? Determining the
height dimensions of your sandbag divs depends on two key considerations; the first and most likely to be
overlooked, is font-size. Obviously smaller fonts will allow for a smoother, more precise, text wrap. Line height
also must be considered if you are attempting to achieve "line by line" text wrap capability. Using a font-size of
11px and a line-height of 15px {font: 11px/15px;} will allow quite precise text wrapping around "sandbag divs" of
approximate, similar height. The text will flow like water in a winding river, filling all the bays and backwaters
along the way.
The problem with using pixel font-size declarations is the inability of the most commonly installed browser, Internet Explorer, to scale text according to the end-user's requirements. Pixel units are relative to the resolution of the viewing device and thereby fixed in scale to the actual display. Adjusting the text size option in Internet Explorer will not change the display size of a pixel-sized font. Mozilla, Netscape and other modern browsers can adjust the display of pixel-sized fonts, while the Opera browser can zoom the entire view port. Accessibility and usability considerations can be addressed by using the em for your CSS font-size declaration.
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 :::
Tomorrow: Internet Explorer and Mozilla/Netscape considerations » CSS Image Text Wrap part 3
[ Return to Top of Page | Access Key list | Contact BIG BAER ]