1.
The Question
“ Trying to move toward absolute positioning versus floats for
layout.... I am trying to figure out if [you] have to always use a height
on the wrapper div. If I have text columns that have no specific
”
height it seems everything breaks at that point.
Shane Perran, graphicalwonder.com
ethan marcottESXSW2006www.vertua.com

2.
Absolute Positioning
It’s all about the x and the y (axes, that is)
❖
Treating parts of your document as distinct
❖
“layers”
Use CSS to precisely place them upon a
❖
coordinate grid
Cake, yes? Let’s look at an example.
ethan marcottESXSW2006www.vertua.com

3.
A new “positioning context”
div.photo {
<div class="photo">
position: relative;
<p>Here’s a caption. Yay.</p>
}
<img src="photo.jpg" alt="" />
</div>
p.caption {
position: absolute;
bottom: 9px;
}
ethan marcottESXSW2006www.vertua.com

4.
"Bottom-blindness"

5.
position: relative;

6.
position: position:
margin-left: [x];
absolute; absolute;
margin-right: [y];
width: [x]; width: [y]

7.
Remember <img align="left">?
ethan marcottESXSW2006www.vertua.com

8.
The basics
img { float: left; }
ethan marcottESXSW2006www.vertua.com

9.
The basics
img { float: right; }
ethan marcottESXSW2006www.vertua.com

10.
Reflow, floats, and you
img { float: left; }
ethan marcottESXSW2006www.vertua.com

11.
Restoring order to the flow
p.clear { clear: left; }
ethan marcottESXSW2006www.vertua.com

12.
Okay, great. Kitty pictures. So?
Floats can provide us with a more flexible
❖
layout model
Clearing allows the components of our
❖
designs to become “context aware”
Let’s view a simple example.
❖
ethan marcottESXSW2006www.vertua.com

13.
Marrying floats and positioning
ethan marcottESXSW2006www.vertua.com

14.
The marvelous markup
<div class="person">
<div class="image">
<img src="photo.jpg" alt="" />
</div>
<dl>
<dt><a href="#">Durstan who?</a></dt>
<dd>
<ul>...</ul>
</dd>
</dl>
</div>
ethan marcottESXSW2006www.vertua.com

15.
Getting our 2-column structure
ethan marcottESXSW2006www.vertua.com

16.
Getting our 2-column structure
.person {
clear: left;
}
.person .image {
float: left;
}
ethan marcottESXSW2006www.vertua.com

17.
One minor addition
<div class="person">
<div class="image">
<img src="photo.jpg" alt="" />
</div>
<dl>
<dt><a href="#">Durstan who?</a></dt>
<dd>
<ul>...</ul>
</dd>
</dl>
</div>
ethan marcottESXSW2006www.vertua.com

18.
One minor addition
<div class="person">
<div class="image">
<img src="photo.jpg" alt="" />
</div>
<dl>
<dt><a href="#"><i></i>Durstan who?</a></dt>
<dd>
<ul>...</ul>
</dd>
</dl>
</div>
ethan marcottESXSW2006www.vertua.com

19.
Layering the link
.person {
position: relative;
}
position: relative;
ethan marcottESXSW2006www.vertua.com

20.
Layering the link
.person {
position: relative;
}
.person dt i {
<i></i>
display: block;
height: 160px;
width: 160px;
position: absolute;
left: 0;
top: 0;
}
ethan marcottESXSW2006www.vertua.com

21.
Ethan Marcotte
vertua.com