The CSS Box Model

CSE 190 M (Web Programming), Spring 2008

University of Washington

Reading: Chapter 2, sections

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.1 Valid CSS!

Motivation

flow

CSS Box Model

box model

Document flow - block elements

flow

Document flow - inline elements

flow

Document flow - a larger example

flow

CSS properties for borders

h2 { border: 5px solid red; }

This is a heading.


More border properties

Border example 2

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

This is a heading.


CSS properties for padding

Padding example 1

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

This is the first paragraph

This is the second paragraph

This is a heading

Padding example 2

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

This is the first paragraph

This is the second paragraph


CSS properties for margins

Margin example 1

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

This is the first paragraph

This is the second paragraph


Margin example 2

p {
	margin-left: 200px;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph


CSS properties for dimensions

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

This paragraph uses the first style above.

This heading uses the second style above.


Centering a block element: auto margins

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Top/bottom margin collapse

margin collapse
margin collapse

Floating elements

The CSS float and clear properties

The CSS float property (reference)

img.headericon { float: right; width: 130px; }

Borat 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. Borat ...


Floating elements diagram

float

Common float bug: missing width

I am not floating, no width

I am floating right, no width

I am not floating, 45% width

I am floating right, 45% width

Practice Problem

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.

Result:Interaction Pane:

The clear property

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

homestar runnerHomestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with references to 1980s and 1990s pop culture, notably video games, classic television and popular music.

My Homestar Runner Fan Site


Clear diagram

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

float clearfloat clear

Practice problem (HTML) (CSS)

W3Schools.com

"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)

Free Web Building Tutorials

At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

W3Schools - The Largest Web Developers Site On The Net!

Copyright 1999-2005 by Refsnes Data.

Recall: Firefox Firebug extension

Firebug Firebug Firebug