The cross-column pull-out gave us a new technique for marking up a layout with a pull-out positioned between columns. Now we examine a variation of the technique for wrapping around the edges of a non-rectangular image positioned between columns. But first we need to update the original technique.
Upgrading the cross-column pull-out
After ALA published Cross-Column Pull-Out Part One, Daniel Sheppard shared a technique that lets us avoid character counting, the most cumbersome part of the original method. Let me briefly explain this new technique.
XHTML:
<div id="leftCol" class="col">
<div class="preImageBuffer"></div>
<span class="CCspace"> </span>
<p>…</p>
</div><div id="rightCol" class="col">
<div class="preImageBuffer"></div>
<span class="CCpullout">
<del> [Pullout: </del>
<span>
<img src="monkey.jpg" alt="" />
The office monkey, riding the office camel.
</span>
<del>] </del>
</span>
<p>…</p>
</div>
CSS:
.CCspace {… clear:right;} .CCpullout {… clear:left;}.preImageBuffer {height:9em;width:1px;} #leftCol .preImageBuffer {float:right;} #rightCol .preImageBuffer {float:left;}
Identify both columns using leftCol
and rightCol
. Remove the CCspace
and CCpullout
from the middle of the content. Put it before all of the paragraphs. Make sure you add the preImageBuffer
DIV prior to the CCspace
and CCpullout
in the columns. Make adjustments to the CCspace
by adding a clear: right; and CCpullout
by adding a clear: left; Add the three new CSS lines .preImageBuffer
and the information about the left and right columns.
To adjust the location of the pullout in the content, simply change the height in .preImageBuffer
(height is in EMs.) Now we have the ability to change the vertical height of the pull-out without character counting!
Example 0 — The fixed cross-column pull-out
The only design error is on IE 5 on a Macintosh, which we’ll get to later. Now that we’ve improved the core technique, we can move on to the fancy stuff.
Setting the stage for the silhouette
To begin, you will need a GIF or PNG with a transparent background. Our test subject is the Office Monkey: monkey.gif
. (Note: We’ve added a border here to show that the background is transparent.)
The goal of the silhouette is to wrap the text around our diamond-shaped graphic. As in the basic cross-column pull-out, we’ll start with two columns and the image will be placed at the top of the second column, right after the preImageBuffer
.
XHTML:
<div id="overall"> <div id="leftCol" class="col"> <div class="preImageBuffer"></div> <p>…</p> <p>…</p> </div> <div id="rightCol" class="col"> <div class="preImageBuffer"></div> <span class="CCsilhouette"> <span> <img src="monkey.gif" alt="Office Monkey" /> </span> </span> <p>…</p> <p>…</p> </div> </div>
CSS:
* { margin: 0; padding: 0; } p { padding: 0.625em 0; text-align: justify; line-height: 20px; } #overall { width: 755px; margin: 0 auto; } .col { width: 365px; padding: 0 5px; float: left; } .CCsilhouette { float: left; clear: left; margin-left: -180px; } .CCsilhouette span { position: absolute; } .preImageBuffer { height:9em;width:1px; } #leftCol .preImageBuffer { float:right; } #rightCol .preImageBuffer { float:left; }
Perhaps the most important piece to this CSS is in the
where we set the top and bottom margin to 0.625 pixels and the line height to 20 pixels. This standardizes the text to allow us to position the silhouette in a more predictable manner.
Figure 1: Example 1
Preserving silhouette space
The image is in the middle of both columns, but the text is not wrapping yet, so we need to make room for our pull-out. Unlike the original cross-column technique, this method floats only small sections of the text at a time. Let’s start by adding space to the leftCol
.
XHTML:
<div class="preImageBuffer"></div> <span class="LS1"> </span>
CSS:
.LS1 {
/* Float the <span>
right and clear it right.
*/
float: right; clear: right;
/*
The height will be arbitrary based on the
section of the image that you want to float
text around.
*/
width: 50px; height:40px;
/*
Use a background color to see the space you
are creating. Remove it later.
*/
background: #f00;
}
Figure 2: Example 2
By using height increments of 20 pixels (same as the line-height in the <p>
), we are able to wrap the text a line at a time (20px = 1 line; 40px = 2 lines; etc). You can see the space with the background color turned on. Use it until you have the space you desire. Then remove the background color.
Finishing the first column
One space down and a bunch to go! Let’s add some more spans right after the first. The number of spans is based on the image that you have and how close you want the text to float to the image.
XHTML:
<div class="preImageBuffer"></div> <span class="LS1"> </span> <span class="LS2"> </span> <span class="LS3"> </span> <span class="LS4"> </span> <span class="LS5"> </span> <span class="LS6"> </span> <span class="LS7"> </span> <p>…</p>
Putting carriage returns after the <span>
doesn’t alter the effect and it makes it a lot easier to spot when editing code.
CSS:
.LS1, .LS2, .LS3, .LS4, .LS5, .LS6, .LS7 { float: right; clear: right; } .LS1 {width: 50px; height:40px; background: #f00;} .LS2 {width:100px; height:40px; background: #0f0;} .LS3 {width:140px; height:40px; background: #00f;} .LS4 {width:170px; height:60px; background: #f00;} .LS5 {width:140px; height:40px; background: #0f0;} .LS6 {width:100px; height:40px; background: #00f;} .LS7 {width: 50px; height:40px; background: #f00;}
To make things more visible for the example, there are different background colors to show the location of each <span>
. (Note: The class name LS stands for “left side” and is arbitrary.)
Figure 3: Example 3
The second column
The technique is similar for the second column, rightCol
, but there is one minor change in the XHTML:
XHTML:
<div class="preImageBuffer"></div> <span class="RS1"> <span class="CCsilhouette"><del> [Pullout: </del> <span> <img src="monkey.gif" alt="Office Monkey" /> </span> <del> ] </del></span> </span> <span class="RS2"> </span> <span class="RS3"> </span> <span class="RS4"> </span> <span class="RS5"> </span> <span class="RS6"> </span> <span class="RS7"> </span>
The trick is to make the very first space (RS1
) have the pull-out (CCsilhouette
) as a child. We do this to make IE on the Macintosh behave better. It still doesn’t completely solve the problem, but without the pull-out nested in the first space, the text would be nearly impossible to read in IE 5 Mac. The rest of the spacer <span>
behaves as the first column. (Note: RS stands for “right side.”)
CSS:
.RS1, .RS2, .RS3, .RS4, .RS5, .RS6, .RS7 { float: left; clear: left; } .RS1 {width: 50px; height:40px; background: #f00;} .RS2 {width:100px; height:40px; background: #0f0;} .RS3 {width:140px; height:40px; background: #00f;} .RS4 {width:170px; height:60px; background: #f00;} .RS5 {width:140px; height:40px; background: #0f0;} .RS6 {width:100px; height:40px; background: #00f;} .RS7 {width: 50px; height:40px; background: #f00;}
As you look through the CSS, you will realize that the image being used is symmetrical. The heights and widths are the same as the first column, so the CSS could be optimized. This exercise is left up to the designer, and will not be true when dealing with odd shaped and non-symmetrical images.
Figure 4: Example 4
Recap of the cross-column silhouette pull out
To finish the pull-out, remove all references to the background colors from the CSS.
Figure 5: Example 5
This particular technique works great in most browsers. IE on a Macintosh has some issues with spacing, but the error is tolerable. (The design forces space above the image as in Figure 6.)
Figure 6: the design error for IE on a Macintosh
Please be aware of this discrepancy as you decide whether to use this technique.
There are a few points that should be made clear. Remember to keep the non-breaking spaces (
) in the <span>
tags. Though it doesn’t fix IE on a Macintosh, it does make it a bit more presentable. The choice to make the pull out an image instead of a background image is up to the designer. If you desire a background image, then add the CSS to the .CCsilhouette
span.
Once again, I want to thank my students Matthew Latzke for his assistance and Andrew Assarattanakul for helping discover and resolve the nesting problem for IE on a Macintosh. Most importantly, I want to thank Daniel Sheppard who helped eliminate the character counting and showed us how to use the preImageBuffer
.
Completed Code
XHTML:
<div id="leftCol" class="col"> <div class="preImageBuffer"></div> <span class="LS1"> </span> <span class="LS2"> </span> <span class="LS3"> </span> <span class="LS4"> </span> <span class="LS3"> </span> <span class="LS2"> </span> <span class="LS1"> </span> <p>…</p> </div><div id="rightCol" class="col"> <div class="preImageBuffer"></div> <span class="RS1"> <span> <img src="monkey.gif" alt="Office Monkey" /> </span> </span> <span class="RS2"> </span> <span class="RS3"> </span> <span class="RS4"> </span> <span class="RS3"> </span> <span class="RS2"> </span> <span class="RS1"> </span> <p>…</p> </div>
CSS:
* { margin: 0; padding: 0; } p { padding:.625em 0; text-align: justify; line-height: 20px; } #overall { width: 755px; margin: 0 auto; } .col { width: 365px; padding: 0 5px; float: left; } .CCsilhouette { float: left; clear: left; margin-left: -180px; } .CCsilhouette span { position: absolute; } .preImageBuffer { height: 9em; width: 1px; } #leftCol .preImageBuffer { float: right; } #rightCol .preImageBuffer { float: left; } .LS1, .LS2, .LS3, .LS4 { float: right; clear: right; } .RS1, .RS2, .RS3, .RS4 { float: left; clear: left; } .LS1, .RS1 { width: 50px; height:40px; } .LS2, .RS2 { width:100px; height:40px; } .LS3, .RS3 { width:140px; height:40px; } .LS4, .RS4 { width:170px; height:60px; }
Additional examples
Example 6—Non-symmetrical variation
Example 7—Double face (or is it a vase?)
Enjoy!
38 Reader Comments
Load Comments