Web Programming Step by Step, 2nd Edition

Lecture 4: The CSS Box Model; Floats

Reading: 4.1–4.3

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

The CSS Box Model

• for layout purposes, every element is composed of:
  • the actual element's content
  • a border around the element
  • padding between the content and the border (inside)
  • a margin between the border and other content (outside)
• total width = content width + L/R padding + L/R border + L/R margin
  total height = content height + T/B padding + T/B border + T/B margin
  • IE6 doesn't do this right

Block elements

• block elements are containers for text and inline elements
  • examples: paragraphs, list items, table cells
  • cause text inside them to wrap to their width
  • many block elements have default margins and/or padding for whitespace (decided by the browser)

Inline elements

• inline elements behave like plain text content
  • examples: bold text, code fragments, images*
  • wrap along with text to fit the width of their containing element
  • must be contained inside a block element

* the img tag is actually a hybrid "inline block" element

Document flow - block elements

Document flow - block and inline elements

CSS properties for borders

h2 { border: 5px solid red; }

• thickness (specified in px, pt, em, or thin, medium, thick)
• style (none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid)
• color (specified as seen previously for text and background colors)

More border properties

Border example 2

h2 {
	border-left: thick dotted #CC0088;
	border-bottom-color: rgb(0, 128, 128);
	border-bottom-style: double;
}

• each side's border properties can be set individually
• if you omit some properties, they receive default values (e.g. border-bottom-width above)

Rounded corners with border-radius

p {
	border: 3px solid blue;
	border-radius: 12px;
	padding: 0.5em;
}

• each side's border radius can be set individually, separated by spaces

CSS properties for padding

Padding example 1

p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; }

Padding example 2

p {
	padding-left: 200px; padding-top: 30px;
	background-color: fuchsia;
}

• each side's padding can be set individually
• notice that padding shares the background color of the element

CSS properties for margins

Margin example 1

p {
	margin: 50px;
	background-color: fuchsia;
}

• notice that margins are always transparent
  (they don't contain the element's background color, etc.)

Margin example 2

p {
	margin-left: 8em;
	background-color: fuchsia;
}

• each side's margin can be set individually

CSS properties for dimensions

p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }

Centering a block element: auto margins

p {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
}

• works best if width is set (otherwise, may occupy entire width of page)
• to center inline elements within a block element, use text-align: center;

The CSS float property (reference)

• a floating element is removed from normal document flow
• underlying text wraps around it as necessary

Float example

<img src="images/borat.jpg" alt="Borat" class="headericon" />
Borat Sagdiyev (born July 30, 1972) is a ...

img.headericon {
	float: left;
}

Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British-Jewish comedian Sacha Baron Cohen. He is the main character portrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious Nation of Kazakhstan ...

Float vs. alignment

• using Firebug, toggle the above divs from being aligned to floated...

Floating content and width

I am not floating, no width set

I am floating right, no width set

I am floating right, no width set, but my text is very long so this paragraph doesn't really seem like it's floating at all, darn

I am not floating, 45% width

I am floating right, 45% width

• often floating elements should have a width property value
  • if no width is specified, other content may be unable to wrap around the floating element

The clear property

p { background-color: fuchsia; }
h2 { clear: right; background-color: yellow; }

Clear diagram

div#sidebar { float: right; }
p { clear: right; }

Common error: container too short

<p><img src="images/homestar_runner.png" alt="homestar runner" />
	Homestar Runner is a Flash animated Internet cartoon.
	It mixes surreal humour with ....</p>

p { border: 2px dashed black; }
img { float: right; }

• We want the p containing the image to extend downward so that its border encloses the entire image

The overflow property

p { border: 2px dashed black; overflow: hidden; }