#34

Get More Refcardz! Visit refcardz.com

CONTENTS INCLUDE:
The CSS Visual Model

Core CSS: Part 111

•

•
The Box Model
•
The Power and Problem with Floats
•
CSS Positioning
Core CSS Wrap-Up
By Molly E. Holzschlag
•

•
Hot Tips and More...

The CSS 2.1 Visual Model, continued

ABOUT THIS REFCARD The most critical piece to understand is that every ele ment
creates a box. This box is the foundation for what is known
To understand and manage attractive design and layouts, as the box mo de l and is a critical component to understanding
gaining an appreciation for the how to manage the CSS Box how to style elements within your document.
Model, Floats and Positioning is paramount. 1n this third and
final refcard in the Core CSS series we turn our attention to
the
THE BOx MODEL
visual models that exist within CSS. You’ll learn not only about Every element box can be styled by the box components. 1n
how visual models work, but how to troubleshoot and repair CSS 2.1, the Box Model consists of the content at center, and
common problems too. the top, right, bottom and left borders, padding and margin.
T H E C S S V I S UA L M O D E L The borders, padding and margin values for each or any side
of
The path to master today’s options for layout requires a significant the box are all optional and can be styled using CSS.
study of the way that browsers work with the markup and style
they’re interpreting. Current Web browsers implement what is Boxes only go to the width and/or height of their
known as the “CSS Visual Model” and lay out content based on
Hot
Tip content.
by You acan
providing control the
specified width
width, butofinblock boxes
the case
a foundation of lines and boxes.
Lines and Boxes of floats, you’ll need to use clearing and other
1t’s very likely you’ve heard the terms “inline” and “block” to
techniques to “stretch” element heights.
w ww.dzo ne .com

describe HTML and XHTML elements. 1’ll review their meaning

here
in the context of the model. An inline element by default is one
that
lies on the line with no subsequent break, unless the line has
come
to the end of available browser space in which to flow. Boxes that
fall on a line in this fashion are called line boxes (Figure 1).

Figure 3. The CSS Box Model.

1t’s important to point out that because of flow issues within a

Figure 1. 1magine this is a series of text within a paragraph. Note browser, inline elements can’t take a width. Therefore, while you
how the inline elements do not cause a line break, and that they can
generate what is known as a “line box.” style other elements of an inline box, you can’t set an explicit
A block level element by default defines a block, and there is a width. G et More Refcardz
break between it and the next element. (They’re free!)
Authoritative content
•
Co re CSS: Part

Designed for
•

• developers
• Written by top experts
• Latest tools &
• technologies
• Hot tips & examples
Bonus content online
Subscribe New issue every 1-2
Refcardz.com
weeks
III

Figure 2. 1’ve taken the original text and p lace d it within a Now for FREE!
p arag rap h e le me nt. Then, d up licate d the e le me nt below, giving us Inc.
DZone, | w ww. d z o n e . c om
two b lo ck boxes each containing inline boxes.
 2
tech facts at your fingertips
Core CSS: Part 111

The Box Model, continued

T H E P O w E R A N D P R O B L E M O F F L O AT S
Understanding the box model is critical because it gives
designers a greater sense of what they can actually style. For
Floats have become a very critical part of today’s CSS approach
example, you can add backgrounds or styled borders to the
to visual layout. At first glance, the concept is very simple. While
content surrounded by the box. A bit of a warning, though,
the Box Model in 1E6 and below does not follow the CSS box floating elements can assist us in doing all kinds of visual
model. Therefore, it is necessary to use the correct there are challenges inherent to using them, including the way
DOCTYPE magic, they are rendered in browsers.
declaration (See Core CSS: Part 1 Refcard) in 1E6 and 1E7 to
The Basic Intention of Floats
ensure the proper box model is in use. Otherwise, width
measurements will be significantly different. 1nterestingly, floats were not really envisioned as a means for
creating columns, although that’s often how we use them.
Rather, they were developed to allow text to flow around
Hot another element which has been set to the left or the right,
Margin backgrounds in boxes are transparent.
Tip such as an image. This is something we see a great deal in
design, as you can see in Figure 7.
About Normal Flow
Normal flow at its most simplistic is simply the default flow
of elements within a document. Here is an example of normal
browser flow when we diminish the width of the browser, content
will flow down and to the left (Figures 4-6). 1f we reverse the
sizing
and expand the browser, the content will flow up and to the right
(simply reverse viewing order of Figures 4-6).

Figure 7. Floating allows for text to flow around a floated box. 1n

this case, the image is floated right, and the text flows around the
image.

The more we use floats for layout, the more challenged we

are to find ways of controlling and breaking the
manipulation
the normal flow. 1n the case of Figure 8, the image element is
of flow. Floated elements are shifted to the left or right of
Figure 4. A paragraph in the normal flow.

shifted to the left and therefore the text flows to the right.

Figure 5. As the browser window is resized, text flows down and to

the left. Notice the appearance of a scrollbar. Figure 8. 1f the image is floated left, the text flows to the right.

1t’s important to note that the markup stays the same—it’s

only
the CSS that changes. An example of the markup would be:

< h 2 > B a r re l C a c t u s < / h 2 >

<img s r c = ” b - c a c t u s . j p g ” a l t = ” p h o t o o f bloomi ng b a r r e l
cactus” />

Figure 6. As we co ntinue to make the browser window smaller, the <p>The colors are beautiful, but the barrel cactus
paragraph reflows to fit the available width, while the text flows to h a s an i n n e r s e c r e t : i f you a r e i n n e e d o f h y d r a t i o n
the left in a downward manner, elongating the page .
in the desert, this cactus has a lot of fluid inside
and h a s of
location s athe
ved t h e land
image i v e stheo ftext
many.
flow, in the first case, the
Hot A great way to gain an appreciation of normal flow
The CSS values will of be different in terms of manipulating the
Tip is to simply create an HTML page with multiple will simply flow around the floated element once a float
paragraphs of text, and then size and resize the has
image is floated right, and in the second, left. Other elements
browser, watching how the flow behaves.
DZone, Inc. | w ww. d z o n e . c om
been applied.
 3
tech facts at your fingertips
Core CSS: Part 111

The Power and Problem of Floats, continued Float Behavior, continued

Float Behavior
Understanding how floats behave (or don’t) within a browser Hot IE6 will drop the float down in if there is
environment is critical to troubleshooting a variety of issues, no
space, incongruent with other browsers. If
particularly when it comes to layout. While floats can be your
Tip
best layout friend in many, many situations, knowing how floats
beyou’re
sure todeveloping in a Firefox
test constantly environment,
in IE as well. This issue,
behave in general will give you the upper hand!

The first thing to know is that floats are not in the normal flow. referred to as “tolerance” can be remedied by modifying
This means that other text and elements will continue to flow
widths slightly to accommodate IE.
around the floated elements. 1n Figure 9, we see what
happens
if two elements are floated to the right and left. 1f not contained elements,
Floats can beand on the by
contained floated boxes
setting themselves.
explicit widths onThis doesn’t
containing
by another element that has an explicit width, the floated
elements will continue to spread apart as the browser size of how tolerance
eradicate to mathematically
problems,arrange youryou
but it gives elements
a more(Figure 12).
finite idea
increases, and come together as the browser size decreases.

Figure 12. By co ntaining e le me nts and giving them a width, we can

Figure 9. One box flo ate d left, another right. 1f not containe d , the se begin to create columns.
boxes will continue to spread apart or get closer as the browser is
resized. By containing elements, we can create contexts for interface
components. 1f 1 wanted to create three columns as above, 1
If you’ve ever had text begin to and create
could marginsthree
for each of thespecific
divs with columns, and then
widths, set that
borders, within
padding
Hot
unintentionally the three
another individual
div, which columns:
1 would give an explicit width too, containing
Tip crawl up around the side of a floated box,
the solution is float clearing (see “Clearing Floats” < d iv >
later in this reference).
<div>column 1 </div>
<div>column
<div>column 3 </div>
2 </div>
1n order to get floats to stack up nicely next to one another
and avoid this behavior, we simply float them all in the same < / d iv >
direction, typically left (Figure 10).
Of course, using divs for everything is overkill, because many
HTML elements actually have this sort of mechanism built right
in! Consider an unordered list with three list items:
<ul>
<li>column 1</li>
<li>column 2</li>
<li>column 3</li>
</ul>
Figure 10. 1f we float elements in the same direction, they’ll line
up next to each other. This is one way of creating columnar As you can see, the <ul></ul> is an element, and therefore
designs. creates a box. We can then style that box as a container for
the list items residing within. 1f there’s a logical reason to use
What happens if there’s not enough room within the browser
a list, such as with navigation, or linked interface components,
(or the set width of a container element)? The subsequent
consider using semantic elements instead. This is called minimal
floated element “falls off” the line and seeks the first available
markup and is an extremely helpful technique.
space (Figure 11).

There’s no such thing as “div” based design.

Hot Tip That term is popular but highly inaccurate. In

CSS, it’s not that we use divs to create boxes, but

that the element boxes are already there. Use
divs only
where necessary for containment and
DZone, Inc. | w ww.structure.
dz o n e . c om
Figure 11. 1f an element cannot fit into the available space, the box
 4
tech facts at your fingertips
Core CSS: Part 111

The Power and Problem of Floats, continued

CSS POSITIONINg
Clearing Floats
So what happens when you want to stop the flow of text, or CSS positioning is a powerful piece of CSS that allows us to position
a elements in a variety of ways. One of the problems with positioning
floated box, and return to the normal flow? You have to clear is that it has not been well articulated, particularly relative
your floats (Figure 13). positioning, over the years. 1t took me a long time to understand
exactly what relative positioning really was, or was useful for.
Therefore, 1’ll start with relative positioning and work from there.
Relative
1f the fathers of CSS had been thinking about naming it a little
more carefully relative positioning would be called “offset”
positioning.
Essentials for relative positioning:
• A box with a position: relative; designation remains in the

normal flow
Figure 13. Clearing floats is the process of returning the next
• A box with position: relative; creates a new instance of
consecutive element to the normal flow.
normal flow within it
1n terms of floats for layout, if you want to be able to have •
Relative positioning is most useful for offsetting boxes
content below floated elements, such as a traditional “footer”
or creating a positioning context (see Relatively Absolute
where site information will go, clearing is necessary. This allows later this reference)
the subsequent elements to return to the normal flow (Figure 14).
1magine three paragraphs of text in the normal flow (Figure 17).
Using CSS 1’ve hidden the visibility of the text in the second
paragraph to make the visualization of relative positioning clearer.

Figure 14. Once the float is properly cleared, we return to the normal
flow, which is how we can create a footer beneath the floated
columns. Figure 17. Three paragraphs in the normal flow.
There are numerous ways to clear floats. A very popular one is Here’s some CSS that offsets the paragraph using relative positioning:
the creation of a clear class and the use of the property
p { w i d t h : 4 0 0 p x ; b o r d e r : 1px s o l i d b l u e ; }
“clear” p#rel {position: relative; top: 50px; left: 50px;}
and a value of both:
The offset can be seen in Figure 18.
.clear {clear: both;}

People will then use a div or a break element to clear the float:
<div class=”clear”></div> or
<br class=”clear” />
My preference of the two is the break element, as an empty
div is a non-empty element with nothing inside it. While still
slightly presentational, at least “break” has meaning in this
case Figure 18. The second paragraph, positioned relatively.
(Figures 15 and 16).
At this point you’re probably wondering, what is that paragraph
being positioned to? This is why 1 say the term relative in this
instance is so confusing. The answer is not what you’d expect.
A relatively positioned element is positioned in relation to its
location in the normal flow. 1n other words, the browser still
“sees” the positioned element in the flow but on the design
surface, it’s visually moved from where it would have been. This is
Figure 15. The float is properly cleared. Notice how the column to the
left doesn’t fill the entire available space—this is normal behavior. The
why the big space is left behind, almost a ghost of the paragraph.
important issue is that the bottom-most element is cleared and does not The browser interprets the element as being in the normal flow.
try to “creep up” into the available space. Absolute
Absolute positioning is a little clearer in its terminology, and perhaps
a bit more logical in its behavior. An absolutely positioned element:
• 1s removed from normal flow

• 1s positioned in relation to
–a positioned parent element
–the root element of HTML
• Subsequent content flows into the now available space
Figure 16. Even when a tolerance problem forces the far right column
off the line, notice that it does not encroach upon the space above it. Inc.
DZone, | w ww. d z o n e . c om
This is because it’s not in the normal flow. Also, note that despite the
 5
tech facts at your fingertips
Core CSS: Part 111

CSS Positioning, continued Creating a Positioning Context: “Relatively Absolute”, continued

Here’s the CSS used to position the box: Remember, a relatively positioned box creates an instance
of
p#rel {position: absolute; top: 50px; left: 50px;}
normal flow,
document. while it itself
Therefore, remains
creating areasin that
the normal flow ofasthe
stay together a unit
1f we briefly revisit normal flow (Figure 19), we can compare
the can be accomplished by creating
relatively positioned without offsetavalues:
containing element that
before and after positioning. is

ul#sub-nav {position: relative; width: 350px;

padding:
4 0 p x ; b o r d e r : 1px s o l i d b l a c k ; }
1 then styled the list items and links:
li {list-style-type: none;}
a {text-de cora tion: n o n e ; }
Figure 19. Normal flow, again.
li#home {position: a bsolute; width: 100px; left:
10px;
b o r d e r : 1px s o l i d g r e e n ; }
li#products {position:absolute; width: 100px;
a b s o l u t e ; l e f t : 1 2 0 p x ; b o rd e r : 1px s o l i d r e d ; }
li#contact {position: absolute; width: 100px; left:
2 4 0 p x ; b o r d e r : 1px s o l i d b l u e ; }
Figure 20. The second paragraph, positioned absolutely. Notice how the
element is positioned absolutely from the top, left area (this can be the This CSS removes the bullets from the list items. 1 then absolutely
HTML element or another element, such as a div, that is positioned). The position each list item box as 1 see fit, resulting in a box in the
element is taken out of the normal flow, which is why the subsequent normal flow with three links (Figure 23).
paragraph flows up into the available space, unlike relative positioning.

Fixed
Fixed positioning is actually a subset of absolute positioning
and can be very useful in creating static elements on the design
surface while other elements flow behind.
h1 {width: 100%; position: fixed; top: 0; left: 0;
b o r d e r : 1px s o l i d # 9 9 9 ; b a c k g r o u n d - c o l o r : # c c c ; }
Elements that are fixed are done so in relation to the
browser keep like items together within normal flow.
chrome (Figure 21).
Figure 23. Relatively absolute: Using a combination of positioning to

1f the browser is resized, everything will flow normally, but the

absolutely positioned elements will retain their position
within
the relative box.
Stacking Order: z-index
Figure 21. The h2 gray box is fixed to the left and top of the browser
chrome.
An important property in CSS is z-index. This property provides
us a third visual dimension of depth with any positioned element
As 1 scroll the browser, the box remains fixed (Figure 22). (note that the element must be positioned to accept a z-index).
This way, we can stack boxes and have them overlap as we’d like.
1n Figure 24, 1 created 3 boxes and used the following CSS to
cause them to overlap naturally, without using a z-index. This is
the default stacking order behavior when no z-index is involved.
div#sample1 {position: absolute; le ft: 10px; padding:
50px; background-color: blue;}
div#sample2 {position: absolute; le ft: 65px; padding:
50px; background-color: red;}
Figure 22. As 1 scroll, the text flows under the positioned box. True to its
term, the box remains fixed. div#sample3 {position: absolute; left: 110px;
padding:
50px; background-color: yellow;}
ing this
Fixed in IE6, theisn’t
positioning fixedimplemented
box would simply
in IE6, scroll off
although
Hot
Tip IE7 does implement it, as does IE8. If we were view-
div#sample1 {position: absolute; left: 10px; padding:

just as if it were a non-positioned element.

Figure 24. Default stacking order.

Creating a Positioning Context: “Relatively Absolute” 1 can reverse the stack order using the z-index:
One technique that is very helpful to designers who are using a
50px; background-color: blue; z-index: 3;}
combination of floats and positioning to accomplish their layouts
has been coined ”Relatively Absolute”. DZone, Inc. | wdww.
i v #dzs oanme p
. clom
e2 {position:
absolute; left: 65px; padding:
50px; background-color: red; z-index: 2;}
 6
tech facts at your fingertips
Core CSS: Part 111

Stacking Order: z-index, continued Figure 26 shows the results, with the red box coming to the foreground.

Figure 25 shows the results.

Figure 26. Bringing a box to the foreground with z-index.

Another point to make regarding z-index is that each positioning

Figure 25. Reversing the stack using z-index.
context allows for a new instance of z-index. This is why you
1t is important to understand that the higher the number, the might see several instances of the same numbers that result in
“closer” to the screen the item appears. Also, you do not have different stacking orders—it just de p e n d s on what the
to designer or developer is attempting to achieve.
use sequential numbers. 1n fact, designers who want to be very
certain that a given element is always on top of a stack might use CORE CSS wRAP-UP
numbers significantly higher than those lower in the stack:
The goal of the Core CSS series is to ensure that readers are
div #sample 1 {position: absolute ; left: 10px; padding: empowered to understand the areas of CSS that are unclear
50px; background-color: blue; z-index: 2;} and confusing, as well as give insight into the way browsers
behave.
Understanding CSS and how browser behaviors influence the
div #sample 2 {position: absolute ; left: 65px; padding:
50px; background-color: red; z-index: 10;}
work you do empowers you to envision, create and code to a
div#sample3 {position: absolute; left: 110px; high quality that will allow the sites and applications you
padding: design to be manageable, scalable and attractive, too.
50px; background-color: yellow; z-index: 3;}

ABOUT THE AUTHOR RECOMMENDED BOOK

Molly E. Holzschlag Proving once and for all that

Molly E. Holzschlag is a well-known Web standards advocate, instructor, standards-compliant design
author
and . She is an 1nvited Expert to the W3C, and has served as Group Lead doe s not equal dull
for the Web Standards Project (WaSP). She has written more than 30
this design,
covering books client-side development and design for the Web. Currently,
works Molly exampl inspiring tome uses
to educate designers and developers on using Web technologies
practical es from the
tive and beautiful W in ways to create highly sustainable, maintainable, accessible, CSS landmark
organizations such as AOL,interac-
BBC, Microsoft, Yahoo! and many others in an effort to improve Zen Garden site as the
fouhow
standards support, workflow, ebsolve
sites for the global community.
interoperability She consults
concerns and address with major
the long-term to create beautiful,
companies and on ndation for discussions
m ana gem en t of highly interactive, large-scale sites. A popular and colorful individual,
Molly progressive CSS-based Web sites.
has a particular passion for people, blogs, and the use of technology for social progress.
BUY NOw
Web Site books.dzone
http://www.molly.com .com/books/
zencs
s
Get More FREE Refcardz. Visit refcardz.com now!
Upcoming Refcardz: Available:
Using XML in Java Getting Started with PHP
Hibernate Search Getting Started with JPA
Core Mule 2 Core Seam Essential JavaServer Faces
Ruby Essential Core CSS: Part 1
Getting Started with
MySQL JUnit and Struts2
FREE
Equinox and OSGi
EasyMock Core .NET
SOA Patterns Getting Started with Very First Steps in Flex
MyEclipse C#
Getting Started with EMF Spring Annotations Groovy
Core Java NetBea
Core CSS: Part 11 n Design Patterns
Visit refcardz.com for a s 1DE
complete listing of available Refcardz. Published June 2008
6.1 Java
Editor
DZone, Inc.
ISBN-13: 978-1-934238-23-3
1251 NW Maynard
Cary, NC 27513
ISBN-10: 1-934238-23-6
50795
888.678.0399
DZone communities deliver over 4 million pages each month to 919.678.0300
more than 1.7 million software developers, architects and decision Refcardz Feedback Welcome
makers. DZone offers something for everyone, including news, [email protected]
$7.95

tutorials, cheatsheets, blogs, feature articles, source code and Sponsorship Opportunities 9 781934 238233
more. “DZone is a developer’s dream,” says PC Magazine. [email protected]

Copyright © 2008 DZone, 1nc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, Version 1.0
mechanical,
photocopying, or otherwise, without prior written permission of the publisher. Reference: The Zen of CSS Design, Molly E. Holzschlag and Dave Shea, Peachpit Press, February 2005.