Advanced Page Layout

CSE 190 M (Web Programming), Spring 2008

University of Washington

Reading: Chapter 2, sections 2.4 - 2.6

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!

Recall: Document flow


The position property (examples)

div#rightside {
	position: fixed;
	right: 10%;
	top: 36%;
Here I am!

Absolute positioning

absolute positioning

Absolute positioning details

absolute positioning

Fixed positioning

fixed positioning

Negative corners

fixed positioning

Position vs. float vs. alignment

When trying to correctly position and lay out an element, use the following order:

  1. if possible, solve the problem by aligning the element's content
    • horizontal alignment: text-align
      • set this on a block element, and it aligns the inline text content within a block element (but not the block element itself)
    • vertical alignment: vertical-align
      • set this on an inline element, and it aligns it vertically within the line it is on inside its containing block element
  2. if alignment won't work, try floating the element
  3. if floating won't work, try positioning the element
    • absolute/fixed positioning should be seen as a last resort and should not be abused

Details about inline boxes

The vertical-align property

vertical-align example

<p style="background-color: yellow;">
<span style="vertical-align: top; border: 1px solid red;">
Don't be sad!  Turn that frown 
<img src="sad.jpg" alt="sad" /> upside down!
<img style="vertical-align: bottom" src="smiley.jpg" alt="smile" /> 
Smiling burns calories, you know.  
<img style="vertical-align: middle" src="puppy.jpg" alt="puppy" /> 
Anyway, look at this cute puppy; isn't he adorable!  So cheer up,
and have a nice day.  The End.

Don't be sad! Turn that frown sad upside down! smile Smiling burns calories, you know. puppy Anyway, look at this cute puppy; isn't he adorable! So cheer up, and have a nice day. The End.

Common bug: space under image

<p style="background-color: red; padding: 0px; margin: 0px">
<img src="images/smiley.png" alt="smile" />


The z-index property


The display property

h2 { display: inline; background-color: yellow; }

This is a heading

This is another heading

Displaying block elements as inline

<ul id="topmenu">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
#topmenu li {
	display: inline;
	border: 2px solid gray;
	margin-right: 1em;

The visibility property

p.secret {
	visibility: hidden;