CSE 190M Web Programming

Lecture 5: Floating and Positioning

Reading: 4.3 - 4.5

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. 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.

Valid HTML5 Valid CSS

CSS properties for dimensions

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 this element
(block elements only)
max-width, max-height,
min-width, min-height
max/min size of this element in given dimension

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.

4.3: Floating Elements

The CSS float property (reference)

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

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

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, both, or none (default)

Clear diagram

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

float clear

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

The overflow property

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

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

Exercise: Course Webpage

Let's try to make this course webpage mockup look as close to the real thing as we can.

  • Fix the CSE logo image and headers to match the course webpage.
  • Create the multi-column navigation layout.
  • Make the textbook logo appear on the right like the course textbook page.
  • The footer should be on the right of the page as well.

4.4: Sizing and Positioning

The position property (examples)

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

The display property

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

This is a heading

This is another heading

property description
display sets the type of CSS box model an element is displayed with

Displaying block elements as inline

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

Exercise: Beer Blog

We will develop on this beer blog page.

  • The header logo image is not there, make it so.
  • The navigation links are not right, fix them.

The visibility property

p.secret {
	visibility: hidden;
}

Since nobody can see this anyway: ca-ca poo-poo pee-pee!!!

property description
visibility sets whether an element should be shown onscreen;
can be visible (default) or hidden

The opacity property css3

body     { background-image: url("images/marty-mcfly.jpg"); background-repeat: repeat; }
p        { background-color: yellow; margin: 0; padding: 0.25em; }
p.mcfly1 { opacity: 0.75; }
p.mcfly2 { opacity: 0.50; }
p.mcfly3 { opacity: 0.25; }

Marty McFly in 1985

Marty McFly in 1955 fading away, stage 1

Marty McFly in 1955 fading away, stage 2

Marty McFly in 1955 fading away, stage 3

property description
opacity how not-transparent the element is; value ranges from 1.0 (opaque) to 0.0 (transparent)