CSSRule: CSS Café Tutorial 13

Monday, June 08, 2009

CSS Café Tutorial 13 - Floating

We are going to change the structure of our page in this tutorial. I want to float the "specials" div to the right to form a two column layout. When you are planning to float an element in CSS, you have to move its HTML right below the element that the float will go under. I want the "specials" div to display below the Cafe's logo so I moved its HTML immediately after the h1 tag that displays the logo image.

<body>
<div id="homepage">
<h1><span>Four Square Café</span></h1>

<div id="specials">
<h2><span>Today's Specials</span></h2> 

<img src="http://pics.cssrule.com/pics/p.jpg" alt=" ">
<h3>Marquesas Pretzel</h3>
<p>A unique combination....</p>

<img src="http://pics.cssrule.com/pics/d.jpg" alt=" ">
<h3>86 Percent Donut</h3>
<p>Glazed with a bittersweet chocolate....</p>

<img src="http://pics.cssrule.com/pics/k.jpg" alt=" ">
<h3>Cinnamon Swirl Coffee</h3>
<p>....Drink your favorite cinnamon bun in a cup!</p>
</div>

<div id="intro">
<p>Four Square Café is located at the intersection of ....</p>
</div>

The CSS "float" property takes an element out of the normal flow and places it on the left or right of the screen. The direction is determined by the value assigned to the float property. To "float" an element, give the element an identity - this can be a class or an id, give it a width and then float it left or right.

If we drew the flow of this page on a piece of paper, you'll see that since the floated element is taken out of the normal flow, the "specials" div will sit on top of the block elements because as far as they are concerned the "specials" div does not exist. #intro and #coffee divs go all the way across the browser page not changing their block level properties. The only difference that you'll find is in their inline content.

When inline elements such as text are displayed, they can can "see" the floats, in our case they will "see" the #specials div, and will flow around it, respecting its territory. This is true for inline elements on their own or those that are part of a block element.

To show what's happening under the hood, I'm going to turn the background colors of the two block elements, #intro and #coffee on. The #specials div will get a border around it. These are debugging lines that I will remove once we're done.

#specials { 
    margin: 0 10px 10px 10px;
    width: 270px; 
    float: right;
    border: 1px dotted red;
}
#intro, #coffee { background-color: pink; }

To float the #specials div, I gave it a width of 270 pixels, floated it to right with 10 pixel margins around it except for its top margin. Red border is going to frame the div to help us debug. I also added a background color for the intro and coffee divs, two of the main area divs that are going to effected by #specials. The browser output:

With "#specials" div colored in grey, viewed @100%:

As the last snapshot clearly shows, the grey #specials div is floating over two block elements, #intro and #coffee divs both in pink, which extend themselves all the way across the browser window ignoring the float's presence. Their content shrinks - compare first snapshot and second - as you resize the browser showing us that text in a block element respects the boundaries of a float even though its containing block does not.

Best way to understand how the float, block, and inline elements behave around each other is by resizing the browser window and observing how that changes the layout. I turned the background colors of intro, coffee, breakfast to pink. locations and treats divs are yellow. Here's the document.

The CSS updates:

#specials { 
    margin: 0 10px 10px 10px;
    width: 270px; 
    float: right;
}

#specials h2 { 
    text-align: center; 
    color: #6f6b6c; 
    margin:0; padding:0;  
    height: 60px;
    background: url(images/es3.jpg) 0 0 no-repeat;
}
h2 span { visibility: hidden; }

Using the image replacement technique we learned in Tutorial #9, I replaced the "#specials" div heading (Today's Specials) by an image, es3.jpg which comes with a red title on a tiled background: