Web Programming Step by Step

Lecture 5
Floating and Positioning

Reading: 4.3 - 4.5

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

4.3: Floating Elements

The CSS float property (reference) (4.3.1)

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 ...
property description
float side to hover on; can be left, right, or none (default)

Floating elements diagram


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

The clear property (4.3.2)

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

property description
clear disallows floating elements from overlapping this element;
can be left, right, or none (default)

Clear diagram

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

float clear

Common error: container too short (4.3.3)

<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; }

The overflow property (4.3.3)

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

homestar runner Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....

property description
overflow specifies what to do if an element's content is too large;
can be auto, visible, hidden, or scroll

Multi-column layouts (4.3.4)

	<p>first paragraph</p>
	<p>second paragraph</p>
	<p>third paragraph</p>
	Some other text that is important
p { float: right; width: 20%; margin: 0.5em; 
    border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }

4.4: Sizing and Positioning

The position property (examples) (4.4.2)

div#ad {
	position: fixed;
	right: 10%;
	top: 45%;
property value description
static default position
relative offset from its normal static position
absolute a fixed position within its containing element
fixed a fixed position within the browser window
top, bottom,
left, right
positions of box's corners

Absolute positioning

#menubar {
	position: absolute;
	left: 400px;
	top: 50px;
absolute positioning

Relative positioning

#area2 { position: relative; }
absolute positioning

Fixed positioning

fixed positioning

Alignment vs. float vs. position

  1. if possible, lay out an element by aligning its content
    • horizontal alignment: text-align
      • set this on a block element; it aligns the content within it (not the block element itself)
    • vertical alignment: vertical-align
      • set this on an inline element, and it aligns it vertically within its containing element
  2. if alignment won't work, try floating the element
  3. if floating won't work, try positioning the element
    • absolute/fixed positioning are a last resort and should not be overused

Details about inline boxes

The vertical-align property

property description
vertical-align specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element's box

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="images/sad.jpg" alt="sad" /> upside down!
<img style="vertical-align: bottom" src="images/smiley.jpg" alt="smile" /> 
Smiling burns calories, you know.  
<img style="vertical-align: middle" src="images/puppy.jpg" alt="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" />