CSS Positioning and Layout

Pages need to be laid out

But how? � Tables � Absolute positioning �  Floated divs

You can lay it out using tables

� Header section: Row 1 with colspan=3 � Links: Row 2, column 1 � Content: Row 2, column 2 � Ads: Row 2, column 3 �  Footer: Row 3 with colspan=3 � Works great, but semantically wrong!

You can lay it out using absolute positioning <style>!div {! position: absolute;!}!div.header {! height: 100px;!}!div.left {! top: 100px;! width: 100px;!}!div.content {! top: 100px;! left: 100px;!}!</style>!

Unfortunately, this does not scale.

Best to lay it out using floated divs

� We'll show how to do this in the next few pages

� Basically, we'll define the width of a page and each section so that they fit just right.

A word about page flow

� Remember, we have two types of elements �  inline elements ◦ Text and other things flow around the element ◦ No concept of width or height

� block elements ◦ A break appears before and after it ◦ Has width, height, borders, padding, and margins

�  Sounds like we'll need a hybrid of the two

Float to the rescue! �  The style attribute float changes the way that an

element interacts with other elements in terms of layout

�  From the CSS spec: ◦  A float is a box that is shifted to the left or right on the

current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side

� Options ◦  left/right: no break before if it can fit on the page ◦  clear: re-establish breaks

Floating takes some getting used to �  It is the weirdest thing in layouts �  Floating things takes them out of the normal flow

of the text. Think of it like this; a non-floated element sinks to the bottom of the text block. while a floated element 'floats' in a sea of text. The text flows around it instead of being broken up.

� When we float <div>s, we allow them to exist side-by-side

�  Floated elements are processed in the order that they're presented in the markup.

Demo: floats Hands-on floats

But there's now a problem with the width � When the width is nice and wide, our sections

work well. � But when the window is narrow, the sections

stack. �  Solution: Fix the width. � We should always set a width on floated items

Floats work by aligning their edges

�  float: left moves it as far left as it can �  float: right moves it as far right as it can � They keep stacking until they run out of room � Then they shift down until they fit

Demo: Fixed width Hands-on fixed widths

The box model provides aesthetic space

Margins �  Space inside the

container between the container and the contents

Padding �  Space outside the

container between sections

There are many units of measure �  Pixels (px) ◦  Affected by screen resolution ◦  Great for absolute control over layout

�  Ems (em) ◦  Proportion of the default font of the browser ◦  Great for accessibility

�  Points (pt) ◦  From the print world ◦  Great for publishing on paper but not for the web ◦  Use only in print layout

�  Percentages (%) ◦  Proportion of the width or height of the container

So, which do I use?

� Use points only for print views � Use percentages and pixels for screen layout � Use ems for text � Best of all worlds this way!

Demo: Adding padding and margins Hands-on adding padding and margins

You can have different box sides

� The four sides are specified in "TRouBLe" order.

� Top, Right, Bottom, Left

Demo: Disparate sides in the box model Hands-on disparate sizes in the box model

Conclusion

� Pages have different sections which require some planning to lay them out

� Our options: ◦ Tables are semantically for data ◦ Absolute positioning is inflexible ◦  Floated divs are strange but are our best bet.

� We also have the box model to help in the aesthetic layout of our sites

Further Study �  Excellent overview of table vs. div layouts ◦  http://coding.smashingmagazine.com/2009/04/08/from-

table-hell-to-div-hell/ � Great site with many layout techniques ◦  http://www.noupe.com/css/css-layouts-40-tutorials-tips-

demos-and-best-practices.html � Good overview of absolute positioning ◦  http://www.echoecho.com/csslayers.htm

�  Float theory by Smashing Magazine ◦  http://coding.smashingmagazine.com/2007/05/01/css-

float-theory-things-you-should-know/