This is a floating box, and we're going to learn how to make one!
A float—in web design terms—is a box-shaped area of content that hangs either to the left or right of a page, and nearby text flows around it. Floats are great for adding images to a page, or singling out a pull-quote for emphasis. Anything can be floated, and it's a good thing to learn how they work and what you can do with them.
We'll begin with text, let's try this one:
"Let us endeavor so to live
that when we come to die even the undertaker will be sorry."
-Mark Twain
First we have to find the text within the HTML code. Once we have found it, create a div tag around the text with a class of "lfloat" and "col":
<div class="lfloat col">
<p>"Let us endeavor so to live that when we come to die even the undertaker will be sorry." <br />
-Mark Twain</p>
</div>
"Let us endeavor so to live
that when we come to die even the undertaker will be sorry."
-Mark Twain
And that's all you
need. We now have a floating pull-quote. Once it has been
separated from the other text, you can add, erase and edit as much text
as you want—even lists, images and other elements.
What about images?
In order to give a more attractive and uniform look, we have a special method of floating images with captions, as displayed by various screenshots on this site. The change is minor: begin with an image and, if you'd like, a caption:
Isn't
this a cute bug?
Now find the HTML for this
section. Don't forget to include the img
tag—that's your image.
Now,
instead of adding a div
tag, change the p tag to a div tag, and give it a class of "rfloat" and
"col":
<div class="rfloat col"><img … />Isn't this a cute bug?</div>
Try it now, and something weird happens: the image is poking out the right side—that can't be good. This will happen any time an image is larger than 186 pixels in width.
Whenever you put an image on
the web site, you should be concious of its size. Images embedded on
web pages can be no wider than 495 pixels (px), or they will break our
layout. Images larger than 186px will not look right in a floating
column unless you add the following style
attribute to the div
tag:
<div class="rfloat col" style="width:##px"><img … /></div>
Replace ## with the width of your image + 14 (the width of the borders and padding).
Isn't
this a cute bug?That's it! A more graceful floating image with a caption. If you switch back to the WYSIWYG editor, you can still edit the caption's text without problems.
A note on clearing
To clear in web layout is to force something to aling beneath a floated object.
This paragraph has class="rclear" which forces it below anything
floated to the right. The classes rclear (right), lclear (left) and allclear
(both) can be chosen from the WYSIWYG's Class drop-down menu to help you layout text around floats.
Congratulations!
You've now taken the requisite baby steps on your way
to understanding more about how the web works and what likes
behind the WYSIWYG and the Content Management System. The final
installment of HTML Baby Steps will give you a variety or resources on
where to turn if you're interested in learning more.
