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 2010 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

4.3: Floating Elements

The CSS float property (reference) (4.3.1)

property description
float side to hover on; can be left, right, or none (default)

Float example

<img src="images/borat.jpg" alt="Borat" class="headericon" />
Borat Sagdiyev (born July 30, 1972) is a ...
img.headericon {
	float: left;
}
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 ...

Float vs. alignment

none 1 before
none 2 before
right #1
right #2
left #1
left #2
none 1 after
none 2 after

Common 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

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

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)

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

4.4: Sizing and Positioning

Recall: CSS for dimensions (4.3, 4.4.1)

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

This paragraph uses the first style above.

An h2 heading

property description
width, height how wide or tall to make element (block only)
max-width, max-height,
min-width, min-height
max/min size of element in given dimension

The position property (examples) (4.4.2)

div#ad {
	position: fixed;
	right: 10%;
	top: 45%;
}
property value description
position
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

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.
</span></p>

Common bug: space under image

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

Details about inline boxes