Thursday, February 18, 2016

We're going to continue with Tuesday's example.


  • Grading Q1 now
  • Will grade A1 shortly
  • P1 data has been updated (thanks for pointing it out!)
  • Any P1 questions?

CSS Layout

Let's talk about the box model.

HTML pages are laid out in boxes. The main boxes are the block elements: div, p, and a number of others.

Show off the browser tilt — we can see the boxes.

CSS is (primarily) concerned with a few things:

  • Organizing boxes
  • Styling boxes
  • Styling text

There are other things we can do too.

Organizing the Box

Boxes have a few properties that control their size and dimensions:

  • height
  • width
  • padding
  • margin

Boxes also have a border and content.

The box sizing model: the content fills height and width. Outside the content, there is padding, then the border, then the margin.

Each of these properties is a dimension: a length.

  • 20px
  • 30pt
  • 0.5in
  • 6mm
  • 2.0em (relative to font size)
  • 1en (also relative to font size)
  • 2rem (relative to the root font size, from the html element)

Physical measurement distances (in, pt, mm, etc.) are fuzzy. Pixels are not actual device pixels, but are CSS pixels.

We can explicitly size a box with height, width, etc.

We can also use max-height and max-width to allow things to adjust within constraints.

Example: max out the page at 5.5 inches wide:

.shell {
    max-width: 5.5in;
    margin-left: auto;
    margin-right: auto;

The auto setting for the left and right margins tells the browser to split the distance evenly between them.

Watch the resize (with Firefox resize mode)

Suppose we want to off-center — we can put a padding-right: 1in, and it'll be pushed left!


Now what does that do on a resize?

Oops, that's kinda ugly. How to fix?

Responsive Design

We want the padding to go away on small screens.

CSS lets us say things are only used on certain screen sizes, etc.

@media screen and (min-width: 768px) {
    .shell {
        padding-right: 1in;

Principle: Design the page for mobile. Use media rules to layer the desktop styles on top.

Box Flow

How the boxes flow around the screen is decided, first, by whether elements are block or inline.

Inline elements flow left to right (in LTR languages), and are allowed to flow onto multiple lines.

Block elements stack on top of each other, top to bottom, within their containing block.

Exception: a box can float!

  • Floating sticks the box to the left or the right, other content goes around it.
  • Want to be below the float? Clear it.