<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Cross-Column Pull-outs using CSS -- and no Javascript

Published on
12,318 Points
2,418 Views
4 Endorsements
Last Modified:
Awarded
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 likeA 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;}

Open in new window

The left column is simple. It puts the fixed height-and-width span into the text:
... metus eu leo. Nulla<span class="Espace">&nbsp;</span> faucibus pretium ...

Open in new window

The right column is a little more complicated (Mr Frommelt's page describes exactly what's going on very succinctly), but essentially, it's another span that puts the image in the right place as defined by the .Epullout style:
... 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 ...

Open in new window

If you're going to try it at home, pay attention to the part about counting the number of characters in a line, because it will save you a lot of tinkering. Having said that, the result is exactly what you would expect. But floating an image wasn't my problem; I needed to put a box with some text in there, and lots of searched didn't turn up anything that seemed as easy as placing the image had been.

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">&nbsp;</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>

Open in new window


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;}

Open in new window

Similarly, the height of the two blank <span>s -- Rspace and Lspace -- that are inserted into the main columns, are set as a multiple of the text size, expressed in ems.
.Lspace {width: 110px; height: 6em; padding: 5px; float: right;}
.Rspace {width: 110px; height: 6em; padding: 5px; float: left;}

Open in new window

Finally, while the callout <div> is still positioned absolutely, but its position is set in ems as well.
.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 -->

Open in new window


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
4
6 Comments
LVL 38

Expert Comment

by:lherrou
Nice little bit of coding. I clicked the Yes button above!
0
LVL 56

Expert Comment

by:Scott Fell, EE MVE
Thank's!
0
LVL 15

Author Comment

by:Eric AKA Netminder
padas,

Thank YOU.

ep
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

LVL 53

Expert Comment

by:COBOLdinosaur
Thanks for the mention... I clicked the yes button... because I know you always like article points. ;^)

Cd&
0
LVL 56

Expert Comment

by:Scott Fell, EE MVE
I tried to vote twice but they are pretty good about not letting that happen.
0
LVL 15

Author Comment

by:Eric AKA Netminder
because I know you always like article points

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.
0

Featured Post

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month