Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Creative Floating > Toggling the Float Direction

Toggling the Float Direction

Another aspect of the original Furniture Shack example that we’ll want to replicate is that the side to which each image floats swaps back and forth. One tease will have the image aligned left, while another will have it aligned right. We want to build in the ability to change this at will, with a simple class="alt" added to the <dl> when a swap is desired.

First, we tag the <dl> that we’d like to change float direction on. We’ve chosen the second teaser:

<div id="sweden">
						<dd class="img"><img src="img/gamlastan.jpg" width="80"
						height="80" alt="Gamla Stan" /></dd>
						<dd>This was taken in Gamla Stan (Old Town) in a large
						square of amazing buildings.</dd>
						<dl class="alt">
						<dt>Gamla Uppsala</dt>
						<dd class="img"><img src="img/uppsala.jpg" width="80"
						height="80" alt="Gamla Uppsala" /></dd>
						<dd>The first three Swedish kings are buried here, under
						ancient burial mounds.</dd>
						<dt>Perpetual Sun</dt>
						<dd class="img"><img src="img/watch.jpg" width="80"
						height="80" alt="Wristwatch" /></dd>
						<dd>During the summer months, the sun takes forever to
						go down. This is a good thing.</dd>


Having added the alt class to the second tease, we can now include a few rules at the end of our style sheet that will override the default, which currently aligns the image to the left. The alt style will reverse the direction, floating the image on the right. This class could be swapped in and out at will, giving site editors easy control over the layout of the box.

The following CSS should be placed after the previous declarations we’ve already written:

/* reverse float */
						#sweden .alt dt {
						float: left;
						#sweden .alt dd.img img {
						float: right;
						margin: 0 0 0 8px;

Here we’re telling the browser that it should do the following:

  • For <dt> elements within a <dl> marked with the alt class, float those left (instead of the default right).

  • Float images within the alt class right (instead of the default left).

  • Change the 8-pixel margin that was to the right of the image over to the left instead.

Figure 4.22 shows the results of adding these two little declarations to the style sheet. Because the second tease is marked with the alt class, its image is aligned to the right. The idea here is that we can add or remove a simple class at any time to assign the float direction for a particular image.

Figure 4.22. Toggling the image alignment is as simple as adding or removing the alt class.

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint