Browse All Articles > Cross-Column Pull-outs using CSS -- and no Javascript
I was recently given the task of creating a HTML page from a PDF. That's normally a pretty simple problem, except that in this case, the client wanted some text floated in the middle of a two-column page.
A search turned up this article that describes perfectly how to float an image across two columns. Essentially, the trick is this:
![What it should look like]()
A span of fixed width and height is created in the left column, and the text wraps around it. A similar span containing the image is created in the right column, and the image has a negative margin that makes the text appear to wrap around it. The code in erictestorig.htm shows how it works; the pertinent code is in the style sheet:
So I turned to the one place I know of that has never failed me, and asked a question about it (props, by the way, to padas and my longtime sparring partner, COBOLdinosaur for their help in figuring this all out).
The first suggestion was to use some fairly complicated Jquery code, which probably could have worked, but because of the circumstances of the HTML -- it is generally used in an email sent out to subscribers -- it would not have been acceptable to the client. Then padas suggested using a <div> with an absolute position. The problem, as you can see in erictest2.htm, is that the callout <div> covers the text; the text in the two columns doesn't wrap around the callout.
Cd& then suggested using a blank image, and the light bulb went on. Part of every web developer's arsenal is a 1 pixel X 1 pixel transparent gif or png file (mine is uniquely named spacer.gif) that has the curious property of being stretchable without losing any resolution, because, well... it's transparent. So I replaced the orange X in my original with spacer.gif, and then positioned the callout <div> inside the space.
The final page is in erictest_final.htm and in the code here:
I have included my spacer.gif; save the erictest_final.htm to a folder locally, and save the gif in the same folder, and you'll see the results. The box around the text is unnecessary, but is included so you can see how much space the spacer.gif is taking in this example. This has been tested in Chrome Version 26.0.1410.43 m, Firefox 19.0.2 and Internet Explorer 8.
Addendum: I have attached a sample page for IE9. However, I've had to move a few things a little bit and resize them, which messes up the Firefox and Chrome versions somewhat. In a "real world" situation, one should build to standards-compliant versions (Firefox, Chrome, Safari) first, and then create a separate style sheet for IE, although to be fair, in this test, IE8 performed pretty well; it's IE9 that doesn't want to play nicely.
The file -- ericpetewrapper.htm attached -- has a few twists. The first is that any and all type sizes must be expressed as relative to the body font size; in fact, in the sample, there is no font size set in the body part of the style sheet, so the browser will use whatever its default font and size is, and every other font size in the styling is relative to it.
Now I just have to fix the client's page; he's going to think I'm nuts.
erictestorig.htm
erictest2.htm
erictest-final.htm
spacer.gif
erictest-IE9.htm
ericpetewrapper.htm
A search turned up this article that describes perfectly how to float an image across two columns. Essentially, the trick is this:
A span of fixed width and height is created in the left column, and the text wraps around it. A similar span containing the image is created in the right column, and the image has a negative margin that makes the text appear to wrap around it. The code in erictestorig.htm shows how it works; the pertinent code is in the style sheet:
.Ecol {width: 365px; padding: 0 5px; float: left;}
.Espace {width: 110px; height: 290px; padding: 5px; float: right;}
.Epullout {width: 220px; height: 290px; padding: 5px; float: left; margin-left: -120px;}
.Epullout span {width: 220px; position: absolute;}
.Epullout del {font-size:0px; color:#aaa; position:absolute;}
... metus eu leo. Nulla<span class="Espace"> </span> faucibus pretium ...
... blandit, urna quam dignissim<span class="Epullout"><del> [Pullout:
</del><span><img src="http://www.ee-stuff.com/images/orangeX.jpg"
alt="" /> </span><del>] </del></span> sem, eu lobortis
nisl metus ...
So I turned to the one place I know of that has never failed me, and asked a question about it (props, by the way, to padas and my longtime sparring partner, COBOLdinosaur for their help in figuring this all out).
The first suggestion was to use some fairly complicated Jquery code, which probably could have worked, but because of the circumstances of the HTML -- it is generally used in an email sent out to subscribers -- it would not have been acceptable to the client. Then padas suggested using a <div> with an absolute position. The problem, as you can see in erictest2.htm, is that the callout <div> covers the text; the text in the two columns doesn't wrap around the callout.
Cd& then suggested using a blank image, and the light bulb went on. Part of every web developer's arsenal is a 1 pixel X 1 pixel transparent gif or png file (mine is uniquely named spacer.gif) that has the curious property of being stretchable without losing any resolution, because, well... it's transparent. So I replaced the orange X in my original with spacer.gif, and then positioned the callout <div> inside the space.
The final page is in erictest_final.htm and in the code here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ericpete's test page</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
* {margin: 0; padding: 0;}
body {margin: 0; font-family: sans-serif; font-size: 12px;}
#wrapper {width: 755px; margin: 0 auto; background-color: #aaaaaa;}
#header {margin: 0; background-color: #dddddd;}
#footer {clear: both; width: 755px; display:block;}
p {padding: .625em 0; line-height: 20px;}
h1 {font-size: 23px; line-height: 130%; padding-left: 10px;}
h2 {font-size: 13px; line-height: 130%; padding: 5px; text-align: center;}
.Ecol {width: 365px; padding: 0 5px; float: left;}
.Espace {width: 110px; height: 100px; padding: 5px; float: right;}
.Epullout {width: 220px; height: 100px; padding: 5px; float: left; margin-left: -120px;}
.Epullout span {width: 220px; position: absolute;}
.Epullout del {font-size:0px; color:#aaa; position:absolute;}
.callout {position: absolute; top: 150px; left: 690px; background-color: #FCC; height: 100px; width: 200px; margin: 10px; float: none; text-align: center;}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</h1>
</div>
<div class="Ecol" style="background-color: #FFFDEA;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis, urna vel mollis interdum, magna enim vulputate lectus, sed condimentum libero nisi nec justo. Sed ullamcorper, ante sit amet interdum blandit, urna quam dignissim sem, eu lobortis nisl metus eu leo. Nulla<span class="Espace"> </span> faucibus pretium enim, sed accumsan sapien elementum at. Mauris venenatis aliquet augue, sed venenatis leo rutrum sed. Nam consequat ornare scelerisque. Pellentesque turpis nibh, gravida quis aliquet at, euismod lacinia odio. Duis vitae sodales lectus. In gravida nunc non purus viverra vel volutpat libero semper. Sed aliquam metus ac lectus ullamcorper sed feugiat nibh adipiscing. Vivamus eu elementum nibh. Vestibulum massa tortor, vulputate vel accumsan faucibus, sodales posuere quam.</p>
<p>Suspendisse potenti. Integer pulvinar nibh eu neque aliquet sed egestas lectus lobortis. Curabitur aliquet dapibus lobortis. Vestibulum egestas, erat ut pretium ultrices, dolor diam sodales lorem, ut consequat libero tortor in diam.</p>
</div>
<div class="Ecol" style="background-color: #DAE5F0;" >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis, urna vel mollis interdum, magna enim vulputate lectus, sed condimentum libero nisi nec justo. Sed ullamcorper, ante sit amet interdum blandit, urna quam dignissim <span class="Epullout"><del> [Pullout: </del><span><img src="spacer.gif" width=220 height=120 border=1 alt="" /> </span><del>] </del></span> sem, eu lobortis nisl metus eu leo. Nulla faucibus pretium enim, sed accumsan sapien elementum at. Mauris venenatis aliquet augue, sed venenatis leo rutrum sed. Nam consequat ornare scelerisque. Pellentesque turpis nibh, gravida quis aliquet at, euismod lacinia odio. Duis vitae sodales lectus. In gravida nunc non purus viverra vel volutpat libero semper. Sed aliquam metus ac lectus ullamcorper sed feugiat nibh adipiscing. Vivamus eu elementum nibh. Vestibulum massa tortor, vulputate vel accumsan faucibus, sodales posuere quam.</p>
<p>Suspendisse potenti. Integer pulvinar nibh eu neque aliquet sed egestas lectus lobortis. Curabitur aliquet dapibus lobortis. Vestibulum egestas, erat ut pretium ultrices, dolor diam sodales lorem, ut consequat libero tortor in diam.</p>
<div class="callout">
<p>"There is no one who loves pain itself, who seeks after it<br />and wants to have it, simply because it is pain..."</p>
</div>
</div>
<div id="footer"><h2>Thanks to COBOLdinosaur and padas!!</h2>
</div>
</div>
</body>
</html>
I have included my spacer.gif; save the erictest_final.htm to a folder locally, and save the gif in the same folder, and you'll see the results. The box around the text is unnecessary, but is included so you can see how much space the spacer.gif is taking in this example. This has been tested in Chrome Version 26.0.1410.43 m, Firefox 19.0.2 and Internet Explorer 8.
Addendum: I have attached a sample page for IE9. However, I've had to move a few things a little bit and resize them, which messes up the Firefox and Chrome versions somewhat. In a "real world" situation, one should build to standards-compliant versions (Firefox, Chrome, Safari) first, and then create a separate style sheet for IE, although to be fair, in this test, IE8 performed pretty well; it's IE9 that doesn't want to play nicely.
One more thing...
Page Editor mark_wills, not being the kind of person to leave well enough alone, started playing with this and figured out a way to do the whole thing without the use of a spacer, and make it work in Chrome, Firefox and both versions of IE (8 and 9).The file -- ericpetewrapper.htm attached -- has a few twists. The first is that any and all type sizes must be expressed as relative to the body font size; in fact, in the sample, there is no font size set in the body part of the style sheet, so the browser will use whatever its default font and size is, and every other font size in the styling is relative to it.
p {padding: .6em 0; line-height: 1.25em;}
h1 {font-size: 1.5em; line-height: 130%; padding-left: 10px;}
h2 {font-size: .9em; line-height: 130%; padding: 5px; text-align: center;}
.Lspace {width: 110px; height: 6em; padding: 5px; float: right;}
.Rspace {width: 110px; height: 6em; padding: 5px; float: left;}
.callout {position: absolute; top: 11em; width: 224px; left: 50%; margin-left: -120px; background-color: #FCC; height: 6em; text-align: center; border: 1px solid black; padding: 2px;}
<!-- callout size = number of lines down as a count expressed in em (each line is 1.85) + 2.4 -->
Now I just have to fix the client's page; he's going to think I'm nuts.
erictestorig.htm
erictest2.htm
erictest-final.htm
spacer.gif
erictest-IE9.htm
ericpetewrapper.htm
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (6)
Commented:
Author
Commented:Thank YOU.
ep
Commented:
Cd&
Commented:
Author
Commented:This is true. But I also share.
I tried to vote twice but they are pretty good about not letting that happen.
They wouldn't let me vote either... go figure.
View More