Several years ago I decided to learn to juggle as a relaxation aid. I bought a book that came with three cubical bean bags and over the next few weeks I practiced for 15 minutes several times a day. It amounts to circulating three objects between two hands by tossing two into the air and shifting the third from one hand to the other. When properly performed, solo juggling all takes place in a two-dimensional vertical plane -- like a Web page. It would be easier if the physical objects avoided each other the way CSS boxes do.
I recently encountered a Web design requirement to juggle two variable-height dynamic content boxes above a third, with all three of those boxes beside a fourth which held navigation links. One top box contained a list of headlines that changed in word length several times an hour, and the other usually contained a photo of approximately constant size. I didn't want any overlap of content as one of the top two boxes' content height changed from time to time depending on the size of an RSS feed. All boxes would be placed slightly right on the page to reveal a non-repeating background logo image in position on the left.
My solution was to take advantage of CSS standards that force boxes to respect each other's spaces: Place the three juggled variable-height boxes inside a fifth containing box to isolate them from the fourth separate navigation box. It's easier to see in a diagram:
First, to define the major layout areas: The juggling box (space for the "tossed" boxes) and navigation box, with standard XHTML markup:
<div id="juggler">
</div>
<div id="navs">
<ul>
<li>Navs here...</li>
.
.
</ul>
</div>
And now the CSS to toss them into the page space:
#juggler {
position: absolute;
top: 30px;
left: 15%;
width: 58%;
height: auto;
padding: 1em;
}
#navs {
position: absolute;
top: 30px;
left: 75%;
width: 20%;
padding: 1em;
}
This places the left margin of the main page content 15% of page width in from the left, gives the content the majority of page space, and leaves a gutter between it and the navigation column, box 4. Now to create instances of the juggling boxes inside the juggle container:
<div id="juggler"> <div id="box1"> <p>Content here...</p> </div><!--end box1--> <div id="box2"> <img src="..." alt="" /> </div><!--end box2--> <div id="box3"> <p>Content here...</p> </div><!--end box3--> </div><!--end juggle-->
Now the CSS for the variable height boxes:
#box1 {
position: relative;
float: left;
width: 45%;
padding: 1em;
}
#box2 {
position: relative;
float: right;
width: 45%;
}
#box2 img {
float: right; /* align the picture right edge */
}
#box3 {
position: relative;
float: left;
width: 95%;
margin: 1em 0 0 0; /* gap below top boxes */
padding: 1em;
}
Here's how it works: The left top box (box1) is positioned relative and floated left, forcing it to ride left of any other block inside the juggler container. Similarly, the top right box (box2) is floated relative right, causing it to float right of any other block element inside the container. The main content block, box3, is also floated left relative to the container, and given a content width of 95% (allows for padding, otherwise it would be 100%). What keeps the boxes separated and in their proper places is their respect for each other's relative sizes and the order in which their markup code appears in the page body (like physically juggling three objects!).
Microsoft Internet Explorer treats widths a little less generously than Gecko-based browsers -- it assumes total box width -- so we may have to bump the width of a couple of the boxes to make the right edges line up neatly in the vertical dimension if you use borders. It's not as obvious without borders. To do that, add this Jeffery Zeldman trick to your page, below your stylesheet:
<!--[if IE]>
<style type="text/css">
#navs {
width: 22%;
}
#box3 {
width: 100%;
}
</style>
<![endif]-->
"View->Page Source" of the demo to see how I fixed-positioned the background image and gave the boxes borders and other effects.
An ex-U.S. Navy submariner turned hillbilly, Rik Nilsson free-lance designs web sites, web applications and web-based GUIs from semiretirement, and toys with CSS while lounging on the deck of his mountain home in WatersGulchDigital.com