Interview for CSS - The Box Model Demystified
"CSS - The Box Model Demystified" interview with Sandra Clark
Michael Smith: This time we are talking with Sandra Clark about her CFUNITED-05
talk "CSS - The Box Model Demystified". So why should a developer come to your
Sandra Clark: During this past year, one of the things I have noticed with
questions I receive is that a lot of frustration with CSS comes from an
incomplete knowledge of the CSS Box Model and the rules that define it. This
talk aims to give developers the knowledge they need to be successful with the
box model in CSS (and in CSS, EVERY element is affected by the box model).
MS: So what is the box model in simple terms?
SC: The box model is the way in which each element of an HTML page lays out on
the screen. It includes both the horizontal and the vertical space it
encompasses. There are very specific rules for this within CSS and an
understanding of both the block box model and the inline layout box model helps
when it comes down to knowing which properties apply to which. (For instance,
text-align is used solely in the inline layout model and is not available to
center something such as a div).
MS: Thanks. What does inline layout mean?
SC: An inline layout model means that the items that use that model can be
placed side to side. For example, by using the inline layout model, I can style
an unordered list as a horizontal navigation bar.
MS: Wow that sounds powerful! Can you use CSS for navigation and menus?
SC: Sure, navigation and menus can be structured as unordered lists and then
styled in various ways, either vertically or horizontally. Heck, I've even done
drop down menus using pure CSS. (Of course they don't work on Internet Explorer,
but they look great on Firefox, Mozilla and Opera).
MS: That is neat but isn't there a way to get IE to render this CCS? And does it
matter anyway with IE's users going down each day to Firefox?
SC: Well Microsoft has announced Internet Explorer 7 for this summer.
Considering that they are losing user share to FireFox, I am hopeful they will
be incorporating more CSS standard behavior within the browser itself. There is
that is an item called Internet Extensions 7 which is now at beta version 0.8.
It is a project on source forge originally created by Dean Edwards. It has
gotten Microsoft's attention as well.
MS: It sounds like there is a lot to CSS - where can people learn more if your
CFUNITED session is not enough for them?
SC:: Funny you should ask. I am actually going to be teaching a class the day
before CFUNITED (June 28) on Advanced Cascading Style Sheets, this class will
cover advanced selectors, pseudo elements and pseudo classes, as well as
positioning and layout. You can find more information as well as a syllabus at
MS: I will look forward to seeing you at CFUNITED, if not before!