CSS layout

What is layout?

Many of you are interested in designing pages, or making your articles look better. Layout is a big part of that.

Many of you are interested in designing pages, or making your articles look better. Layout is a big part of that.

Layout on the page

Many of you are interested in designing pages, or making your articles look better. Layout is a big part of that.

What you can do with layout

Two tools for layout

  1. The float
  2. The box model

The float

How people wait in line

Normally, elements on a page are like people standing in line at the movie theater. First come, first serve, and you're not going to just walk up next to someone -- if you get there late, you're going to the end of the line.

How HTML elements wait in line

To borrow a metaphor from the website CSS Tricks, a float is like a pull quote or photo in a magazine layout: An element that is pulled to the left or right and lets other content flow around it.

You've noticed until now that, every HTML paragraph, header, image is laid out consecutively, one on top of another. Floats let lay out content side by side.

index.html
styles.css
<img src="http://i.imgur.com/i8U98Ln.jpg">
<p>
  Scientists have recently identified a shocking new truth: cats are far deadlier to wildlife than anyone realized.
</p>


Scientists have recently identified a shocking new truth: cats are far deadlier to wildlife than anyone realized.

That's all it takes. Not bad! You can also float: right.

index.html
styles.css
<img src="http://i.imgur.com/i8U98Ln.jpg">
<p>
  Scientists have recently identified a shocking new truth: cats are far deadlier to wildlife than anyone realized.
</p>
img {
  float: left;
}

Scientists have recently identified a shocking new truth: cats are far deadlier to wildlife than anyone realized.

That's all it takes. Not bad! You can also float: right.

index.html
styles.css
<img src="http://i.imgur.com/i8U98Ln.jpg">
<p>
  Scientists have recently identified a shocking new truth: cats are far deadlier to wildlife than anyone realized.
</p>
img {
  float: right;
}

Scientists have recently identified a shocking new truth: cats are far deadlier to wildlife than anyone realized.

Like so.

Side-by-side floats

index.html
styles.css
<p class="book-one">
  It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.
</p>
<p class="book-two">
  Happy families are all alike; every unhappy family is unhappy in its own way.
</p>
.book-one { 
}

.book-two { 
}

It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.

Happy families are all alike; every unhappy family is unhappy in its own way.

To float two columns of text, or anything else, side by side, just add a float to each one, and be sure to add a width as well.

index.html
styles.css
<p class="book-one">
  It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.
</p>
<p class="book-two">
  Happy families are all alike; every unhappy family is unhappy in its own way.
</p>
.book-one { 
  float: left;
}

.book-two { 
  float: left;
}

It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.

Happy families are all alike; every unhappy family is unhappy in its own way.

To float two columns of text, or anything else, side by side, just add a float to each one, and be sure to add a width as well.

index.html
styles.css
<p class="book-one">
  It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.
</p>
<p class="book-two">
  Happy families are all alike; every unhappy family is unhappy in its own way.
</p>
.book-one { 
  float: left;
  width: 340px;
}

.book-two { 
  float: left;
  width: 340px;
}

It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.

Happy families are all alike; every unhappy family is unhappy in its own way.

To float two columns of text, or anything else, side by side, just add a float to each one, and be sure to add a width as well.

Better side-by-side floats

Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic

index.html
<img src="labrador.jpg">
<p>Labradors are athletic, playful and well-behaved.</p>
<img src="poodle.jpg">
<p>Poodles are skillful in many dog sports, including tracking.</p>
<img src="labradoodle.jpg">
<p>Labradoodles, a hybrid, are friendly and energetic</p>

Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic.

index.html
styles.css
<img src="labrador.jpg">
<p>Labradors are athletic, playful and well-behaved.</p>
<img src="poodle.jpg">
<p>Poodles are skillful in many dog sports, including tracking.</p>
<img src="labradoodle.jpg">
<p>Labradoodles, a hybrid, are friendly and energetic</p>
p {
  float: left;
  width: 200px;
}

img {
  float: left;
}

Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic

What's happening?

Normally, elements on a page are like people standing in line at the movie theater. First come, first serve, and you're not going to just walk up next to someone -- if you get there late, you're going to the end of the line.

index.html
styles.css
<div>
  <img src="labrador.jpg">
  <p>Labradors are athletic, playful and well-behaved.</p>
</div>

<div>
  <img src="poodle.jpg">
  <p>Poodles are skillful in many dog sports, including tracking.</p>
</div>

<img src="labradoodle.jpg">
<p>Labradoodles, a hybrid, are friendly and energetic</p>


Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic

index.html
styles.css
<div>
  <img src="labrador.jpg">
  <p>Labradors are athletic, playful and well-behaved.</p>
</div>

<div>
  <img src="poodle.jpg">
  <p>Poodles are skillful in many dog sports, including tracking.</p>
</div>

<div>
  <img src="labradoodle.jpg">
  <p>Labradoodles, a hybrid, are friendly and energetic</p>
</div>
div {
  border: 1px solid red;
}

Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic

index.html
styles.css
<div>
  <img src="labrador.jpg">
  <p>Labradors ...</p>
</div>

<div>
  <img src="poodle.jpg">
  <p>Poodles ...</p>
</div>

<div>
  <img src="labradoodle.jpg">
  <p>Labradoodles ...</p>
</div>
div {
  float: left;
  width: 250px;
  border: 1px solid red;
}

Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic.

The box model

index.html
styles.css
<div>
  <img src="labrador.jpg">
  <p>Labradors ... </p>
</div>
...
div {
  float: left;
  width: 250px;
  border: 1px solid #999;
}

Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic.

index.html
styles.css
<div>
  <img src="labrador.jpg">
  <p>Labradors ... </p>
</div>
...
div {
  float: left;
  width: 250px;
  border: 1px solid #999;
  margin: 20px;
}

Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic.

index.html
styles.css
<div>
  <img src="labrador.jpg">
  <p>Labradors ... </p>
</div>
...
div {
  float: left;
  width: 250px;
  border: 1px solid #999;
  margin: 20px;
  padding: 10px;
}

Labradors are athletic, playful and well-behaved.

Poodles are skillful in many dog sports, including tracking.

Labradoodles, a hybrid, are friendly and energetic.

Width, margin, border, padding

So here are all the parts of the model? (Review all)

If you need help remembering, just imagine a puffy dress -- the padding is the stuff on the inside of the dress, the border is the hemline, and the margin is the space between each person. The person, like the content, is the in the center.

So let's review the syntax of how to actually use the model.

With your mentor: