The most common problem of floats is its un-accommodating nature that prevents the floats from stretching up to extra limits. So if you want to add borders around the floats, you need to specially command the browsers somehow to stretch the container to enhance its accommodating nature.

In case you want to add black border around both the floating columns in a stringent floating container, you would not be allowed to do the same. Since the float container has no height and width, so the border stubbornly resides on the top of the floating columns.

Old solution

The old solution of this problem did not have the cutting edge technology on it. It included addition of an extra element with “clear: both” to the container. Once it resided in place the container would contain a non-floating element, which would automatically stretch the containers to accommodate further floats.

This can be also done either…

1. By adding an extra element in the HTML source code
2. By using “:after” pseudo-class to generate it

Since the explorer [Win and Mac] does not support the “:after” option, so the second solution is of lesser importance than the first one.

However, while the old solution has been pushed to the back burners, it’s the new solution that is taking its ground.

New Solution

The solution can be expressed through code below:

div.container {
    border: 1px solid #000;
    overflow: auto;
    width: 100%
}

The width is specially needed to trigger “hasLayout” in Explorer Windows. This code will allow the border to neatly fit around the floated elements.

Some of the other points that merit unique solutions for floats:

• Some of the browsers will be comfortable with a certain width or height for the float container div
• The tricks of clearing float bugs works with three of the four overflow values: auto, hidden and scroll. Using the last value will show a set of scrollbars, irrespective of their needs to be displayed
• The browser might also show scrollbars when the content escapes beyond the specific width and length
• The width or height declaration is required to make the effect work in Explorer Windows. If you do not include it Explorer Windows will continue to show the border at the top of the columns, as if there were no overflows.
• A width of 100% is a lucrative starting point, although further complicated layouts may require other values

Problems of new solution

The problem of new solution is stark. It may cause littering of unwanted scrollbars if content escapes from the container box. But a code “overflow: hidden makes sure that none of the scrollbars will be visible. Some of the content might get hidden in the process, but the advantages are more lucrative:

1. The width of the combined floats will never exceed the width of the container, and also preferably remain slightly smaller to allow even more flexibility
2. The height of the container remains absolutely flexible [as much as desired]

So the ultimate right effect…

div. container {
    border: 1px solid #000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

Tips for CSS Floats will continue to produce a decent line-up of CSS techniques that will enable you to create a difference to your website!

The Layout Challenges

Let us check out a website and its layout. The home page of Circa Spring 2001 has six huge blocks that hold and organize the content [mainly using three main tables to lay out the page design].

1. A top navigation bar with five text links and a search form
2. An advertisement block that holds the banner
3. Main content area that will hold articles, banners, advertisements and resources in the site
4. A left navigation bar that will hold all the text links and Web Reference logo of the site
5. A right navigation bar that will hold the text links organized as structure of the site
6. A colored box inside the main area that will hold the “Tips of the day” or “Quote of the day” column

Now the question is whether this complicated layout can be replaced using only CSS or not? Off course yes! Other than the top navigation bar, advertisement block and “Tip of the day” part, you are provided with a three column layout. Since the middle column will be the one with more content so the height of the document will be coded as per the block, and the three columns should vertically be of the same size. You must have noticed the white gap that seems to separate left column from the main content area and another one that also does the same for the right column. The separators will have the same width [9 pixels] as the margin around the table to the edge of the browser windows.

Markup of 3-column layout with tables

This is an old solution of web page layout accomplished with a table format. The content of document is mingled with markup intended to define the visual representing of content:

<html>
<head>
    <title>Table layout</title>
</head>
<body bgcolor="white">

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td colspan="3" valign="top">
            <font color="red" face="verdana, sans-serif">
            A banner that sits at...top of the page.</font>
        </td>
    </tr>
    <tr>
        <td width="190" valign="top">
            <font color="green" face="verdana, sans-serif">
            A column on ... left of the page.</font>
        </td>
        <td valign="top">
            <font color="blue" face="verdana, sans-serif">
            A column in ... center of the page.</font>
        </td>
        <td width="190" valign="top">
            <font color="orange" face="verdana, sans-serif">
            A column on ... right of the page.</font>
        </td>
    </tr>
</table>

</body>
</html>

Markup of 3- column layout with CSS

This coding is more organized as visual layout instructions are removed:

<html>
<head>
    <title>CSS layout</title>
    <style type="text/css">
        @import url("threecolcss.css");
    </style>
</head>
<body>

<div id="banner">
  A banner that sits at ... top of the page.
</div>

<div id="rightcontent">
  A column on ... right of the page.
</div>

<div id="leftcontent">
  A column on ... left of the page.
</div>

<div id="centercontent">
  A column in ... center of the page.
</div>

</body>
</html>

In case you are not using Internet Explorer 5+, Opera 5+ or a browser based on Mozilla, such as NS6+, then these two pages [with table layout and CSS layout] will look completely different. But do not make any mistakes. Pages laid out in CSS will never look the same in newer and older browsers. Older browsers, like NS4 or IE4 are lacking in their support of CSS1 recommendation from 1996. CSS layout is mostly impossible in these browsers, with the exception of non-liquid, pixel-specific layouts like those usually used in games.

For designing websites, you need to care about the theories you are going to use. What if the theories could be innovative, attractive and cheaper? What if they make the website look unique and different from all?

Floating theory in Advanced CSS refers to a way in which an element floats around from one side to another, up and down, so that they can prove their omnipresent nature in the website. They make the website unique. Though the floats are often blamed for sailing images/ texts throughout the website, causing unnecessary readability and usability difficulties, but the truth often differs from the notions.

• When an element is floated around, it becomes a block box. The block box can be shifted from left to right, from up to down and vice versa. Initially a floated box is placed in sync with the normal flow, but then extracted out and shifted to the left or right side. So texts and images can flow down from the right side of left-floated box and up-down the left side of right-floated box. You can also cluster a host of floats beside one another.
• Floated items should always be set with a width [exception when the width is directly applied to an image]. If the width is not set for these floated items, the results can be disastrous, because technically floated elements without a proper definition usually shrinks to the widest element within it. This element can either be a sentence, a word or a single character – but the results might vary from one browser to another.
• Borders, background colors and background images also play an important part in floating theory. As the content gets wrapped around a floated element, the borders and background images/colors extend from underneath the content. In case you do not want the elements below the floated element to wrap round the content, you can apply the clear property concept to the following element using codes like “clear: left”, “clear: right” or “clear: both”.
• It will not affect Block elements that reside above the floated elements. But elements that are below will wrap around the floated element. For example, the code would include – “float: left” element with block level element above and “float: left” element with element below.

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.