Taking Your Camera on the Road

While I deal with this and other design issues I had with my site in the article WordPress Tips and Tricks - Template Files, Styles, and Themes, the issue keeps coming up. So I decided we needed to address it specifically.

What to do when images start shoving other images round?

Generally, we try to avoid browser hacks, but there was one in particular we couldn't avoid. It causes floats within floats, especially those with images floated within floating containers, to fail to recognize the height of the floated image within the container and stair step or wrap itself around neighboring containers. Does that make sense?

Let's spell it out.

One of the biggest problems I had is with floats within floats. A division with a float inside scrambles your layout in FireFox, though it looks great in MSIE. The inside floats don't line up and when they reach the virtual "end" of the parent container, they overlap past the end and into the next container. The problem is that the float doesn't "clear" or stop at the end of the container where it should. It needs to be told when to stop with the "clear" function, but unfortunately different browsers need different instructions to accommodate those instructions.

After playing around with this for days, here is my final fix from Positioniseverything's Easy Clearing.

For example, on the front page of our site, each post excerpt features a bar along the left side in green and often an image in the right side of the container with the text wrapping around the image. The image's position is controlled with a float selector. In Firefox, since a height was not established in the parent container, it ended when the text ended. If the text went below the image, then it wasn't a problem. But if it ended before the end of the image, the next container would then begin, stair-stepping into the container above it.

I needed to apply a "clearing" to the container so that the container below it would wait until the container above was finished, and then begin it's positioning.

The clearfix style is as follows:

.clearfix:after {content: ".";
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End clearfix */

In the index.php template where the excerpt or post content is displayed, I used this:

<div class="excerpt-post clearfix">
<h2 id="post-">......

The main styles of the excerpt area are controlled by excerpt-post but the addition of the clearfix style adds style instructions to the first style. You can learn more about using combination styles in our article on Understanding CSS Selectors and Attributes.

I also used this same technique in our Book Recommendations and Reviews. The ads and review section containers would begin to stair step their way as each container bumped up against the other, unable to determine the previous container's height. I simply added the clearfix style to their styles.

<div class="clearfix books">
<img scr="blah.jpg" title="Amazon books" class="bookads" height="260"  width="120">
<img scr="blah2.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah3.jpg" title="Amazon books" class="bookads" height="260" width="120">
</div>

The same technique would apply if the layout was like this:

<div class="clearfix books">Text here.
<div class="bookads">Book Ad here</div>
Text here.</div>

A lot of people blame Microsoft Internet Explorer for having the most bugs, but I did find some major bugs in other browsers.

• Bugs in Mozilla/FireFox
• Bugs in all browsers

Authors, photographers, teachers, and public speakers, Lorelle and Brent VanFossen, travel extensively with their camera and pen in hand to bring you a variety of articles on nature and travel photography including basic nature photography and the photography business, writing, travel, recreational vehicles, web page design, and life on the road. All images, design, and content are copyrighted and protected by law.

You can find related articles to this topic in our Web Pages and CSS Tips and Tricks and Photographycategories. The previous post is Environment Cleanup: Manufacturing Plants Eliminating Garbage and the next post is Photographer’s Rights. Clearfix CSS Hack: Solving Stair Stepping Images, Issue Number 790, by Lorelle VanFossen, was updated January 31st, 2006.

You can follow comments through the RSS 2.0 feed and you can find more feeds on our Feeds List. Your comment is welcome, as are trackbacks from your site.

Related Articles

• WordPress Tips and Tricks - Template Files, Styles, and Themes
• Books on Birds and Bird Photography
• 150 Tips and Tricks on Cleaning
• Photography Technology Helping NASA and Solving Crimes
• Customizing the WordPress Loop for Excerpt Queries
• Common WordPress Support Questions
• Best Nature Photographers Books
• Equipment Lust: The Hunt for the Ideal Camera

Submit Article: BlinkList | Blogmarks | Digg | Del.icio.us | Ekstreme Socializer | Feedmarker | Furl | Google Bookmarks | ma.gnolia | Netvouz | RawSugar | Reddit | Scuttle | Shadows | Simpy | Spurl | Technorati | Unalog | Wink | Yahoo MyWeb2