Positioning Example

Stylesheet: Width:

Part 1

This is a page that we can use to test various ways of positioning content. We'll work with the happy face image.

Part 2

In the second paragraph, there is also no meaningful content. This text doesn't really have much purpose, it's just filler.

This CSS code is being applied above:

figure {
  margin: 0.5em;
}
#happy {
  float: right;
}

figure {
  margin: 0.5em;
}
#happy {
  float: right;
}
section {
  clear: both;
}

figure {
  margin: 0.5em;
}
#happy {
  position: absolute;
  top: 0;
  right: 0;
}

figure {
  margin: 0.5em;
}
#happy {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.33;
  z-index: -1;
}

#happy {
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
}
#happy img {
  width: 3em;
  height: 3em;
}
main>section:first-child {
  margin-top: 4em;
}

figure {
  margin: 0.5em;
}
/*
NOTE: the media selector won't work with the demo's JS width selector,
since the max-width is still large. Resize your browser window or try
on a smartphone.
*/
#happy {
  float: right;
}
@media (max-width: 480px) {
  #happy {
    float: none;
    text-align: center;
  }
}
@media print {
  figure {
    display: none;
  }
}