The Web Standards Project’s Browser Upgrade Initiative has spurred many web designers to move towards better standards compliant web design, using CSS rather than formatting tables for layout to save user bandwidth while enhancing underlying accessibility, reach and semantics.

Make your website different with CSS Floats

For following float tips and techniques, you need to have a question to answer. Suppose you want to have a host of thumbnail images that would link to larger versions of the images – a common type of web page. Each of these images is supposed to contain a short caption that you would like to keep centered underneath each of the images. For the interest of conserving browser window real estate, you need to keep these images/captions paired up in rows all across the screens but in a way that will wrap up the necessary depending on the width of the browser window [liquid design]. The first few requirements catered to simple codes of tables, but with the last few we have stepped into the realm of CSS.

Step-by-step instructions

• The first requirement is that the thumbnails should have their captions centered beneath the respective images. But this has an easy solution: in your HTML place your image, follow it with a break, and then place the caption in a paragraph that is strategically aligned to the center [through CSS mode].
• In our next step would include lining up the images/captions pairs across the browser window. You can use tables for layout, where each of these image/captions pairs would go into separate TD. CSS can be used here to put these images/caption pairs in separate DIV. To line them up in a horizontal array across the window, you simply need to use CSS to place them into separate DIV. And for placing them up horizontally across the window you need CSS to FLOAT each of these DIVs to the left.

Here is what the CSS might look like at this point:

div.float {
    float: left;
}
div.float p {
    text-align: center;
}

The HTML will look like the following:

<div class="float">
    <img src="image1.gif" width="100" height="100"
        alt="image 1" /><br /><p>caption 1</p>
</div>

<div class="float">
    <img src="image2.gif" width="100" height="100"
        alt="image 2" /><br /><p>caption 1</p>
</div>

<div class="float">
    <img src="image3.gif" width="100" height="100"
        alt="image 3" /><br /><p>caption 1</p>
</div>

The next set of requirements can only be solved using CSS. The image/caption pairs can we wrapped up if there are more than will fit in the browser window. FLOATing the DIVs to the left will already solve the problem. In case we repeat those sample thumbnails many times, they will wrap in the browser window:

In case you have more than one category of thumbnails that you wished to display on the page, and you need to group them up visually, with specific backgrounds or borders, then simply enclose them in a container DIV:

div.container {
    border: 2px dashed #333;
    background-color: #ffe;
}

When you float an element with CSS, it never takes up any “space” and the background and border show above the images instead of surrounding them.

CSS Help Guides

The ABBR and ACRONYM tags are essential, if little used, tags that use the TITLE attribute to expand the acronym or abbreviation. Most of the browsers do nothing to alert the site visitors that there is anything behind the words on the page that can assist them to make some sense of the abbreviation or acronym. Enter CSS.

• On the style sheet you can use bottom borders to the tags to draw attention on the page.
• You can also use CSS to change the cursor into “Help” cursor [usually a question mark] for those browsers that will support it.
• Make sure that you create a class called .help and use SPANs to provide more information about words and phrases that might otherwise confuse your reader

This CSS…

abbr, acronym, .help {
    border-bottom: 1px dotted #333;
    cursor: help;
}

…used in sync with the TITLE attribute on an ABBR or ACONYM tag to create an underline effect that is usually different from the underline hyperlink. Changing the cursor to “help” implies that the word is not clickable, and the TITLE attribute expands the abbreviation or acronym.

These tips and techniques on Float theory will instigate you to use more CSS layout in the web work, and help you create wonders through CSS Layout.

You will learn more about CSS Float tips and techniques in the following chapters.