This document discusses various CSS properties for controlling web page layout and positioning of elements. It covers the CSS box model including margins, borders, padding and content, and properties for defining dimensions, positioning, floats and more. Examples are provided for setting widths, heights, paddings, borders, the display property, and using relative, fixed and absolute positioning.

1. WEB LAYOUT
22-3376 Web Design 2 // Columbia College Chicago

2. QUIZ REVIEW
color: #444
font-family: "Times New Roman", Georgia, serif
font-size: 16px (define in px, em, or %)
font-style: italic
font-variant: small-caps
font-weight: bold (or by number, 300, 400, 700, 800)
letter-spacing: .02em
line-height: 1.6; (relative to whatever your type size is)
text-align: left;
text-transform: uppercase;

3. ASSIGNMENTS
Upload your assignments to your server
!

4. QUIZ
Open a plain text document
!
Write the markup to recreate the image
!
!
http://lms.colum.edu/

5. PROJECT VOTING
Please hand in your ballot by the end of class

6. The Box Model

7. There are five basic properties for defining your “boxes”:
display
width and height
padding
margins
border

8. CSS Box Model
All HTML elements can be
considered as boxes or
blocks. In CSS, the term
"box model" is used when
talking about design and
layout.
The CSS box model is
essentially a box that wraps
around HTML elements, and
it consists of: margins,
borders, padding, and the
actual content.
!
Inspect Element 3d view in Firefox

9. Total dimensions
The actual width or height of any
object is the total of the content
width, padding, borders, and
margins.
.size-me {
width: 200px;
padding: 10px;
border: 2px;
margin: 20px;
}"
The actual width: 254px
content: 200px
padding-left: 10px
padding-right: 10px
border-right: 2px
border-left: 2px
margin-right: 20px
margin-left: 20px
!
!

10. Tags: HTML Sectioning Elements

11. header
footer
nav
section
article
aside

12. Class Exercise
!
1 Boxes

13. Defining padding & margins
You can set the padding and margin properties of any
element in css.
Margin and padding dimensions can be also pixels (px),
ems, or percentage (%).
.space-me {
padding: 10px;
margin-bottom: 20px;
}
!
!
!

14. Defining padding & margins
While you can add padding and margins to inline
elements, not all of your properties will apply (vertical
spacing, see below).
!
!
!

15. Collapsing margins
Body
Elements
p
br
h1 – h6
ul
ol
a
img
When two or more
margins collapse, the
resulting margin width
is the maximum of the
collapsing margins'
widths.
In the example below,
box1 has a taller
margin than box2, so
only that margin will
be used (not added
together).
!
!

16. CSS Shorthand
1
2
3
4
When setting sizes for padding,
margins and borders, instead of this:
.box {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
Use this:
.box {
padding: 10px 15px 10px 15px;
}"
The values start at the top and go
around the element clockwise.
!
!

17. CSS Shorthand
1
2
1
2
If your top/bottom and left/right values
are the same, you can shorten the
declaration even more:
.box {
padding: 10px 15px;
}"
Where the first value is for the top and
bottom, and the second is for left and
right.
!
!

18. Defining borders
You can create a border around any element with css; you
can create the same border on each side, or customize the
color, width and border style of each side.
!
There are 3 properties to define with each border:
border-width: 1px;
border-style: solid; (dotted, dashed, etc)
border color: #666666;
!
!
!

19. CSS Shorthand
Borders can also be shortened, from this:
.box {
border-width: 1px;
border-style: solid;
border-color: #888888
}"
to this:
.box {
border: 1px solid #888888;
}"
Note that there is only a single space between each value, and
they should follow the order shown above.
!
!

20. Defining borders
h3 {
border-bottom: 1px solid #444444;
}
!
!

21. Class Exercise
!
2 Padding, Margins & Borders

22. Class Exercise
!
3 Defining Widths

24. Display property
There are four values that you can give to the display property:
display: block;
display: inline;
display: inline-block;
display: none
!
Inline-block is a special value that allows an element to stay inline
with its containing element, but allows you to control it’s
dimensions as if it were a block element.
display: none removes the element.

25. Display property
By default, certain elements in your html have a display
property of inline or block.
Block elements takes up the full width available, and forces a
line above and below. Examples include <p>, <div>, <ul>,
<blockquote> and all headers.
<div></div>
<p></p>
<ul></ul>

26. Display property
Inline elements can be inserted within block elements or
other inline elements and do no create additional space or
line breaks. Examples include <img>, <em>, <strong>,
<a>, and <span>.
<p>
<p></p>
<p></p>
<a></a> </p>

27. Defining dimension: width and height
You can set the width and height of any element that has a
display property of block or inline-block.
As with type, you can set dimension in pixels (px), ems, or
percentage (%). Setting any width with pixels is referred to as
fixed-width, and setting width in ems or percentages is
referred to as flexible-width.
.size-me {
width: 200px;
height: 200px;
}
!
!

28. Defining dimension: min- and max-
Instead of absolutely defining the width and height of your
elements, you can set minimum and maximum widths and
heights.
This allows you to resize elements based on the browser or
their parent elements. The idea of creating flexible content
that adjusts to the user’s browser/device is at the core of what
is referred to as responsive design.
.size-me {
min-width: 200px;
max-width: 100px;
}"

30. Centered, Fixed-width Page
!
body {
width: 960px;
margin: 0 auto;
}

32. Float and set 300px width on article element
!
!
!

33. Defining dimension: min-width and max-width
!
!
!

34. Defining dimension: min-height
!
!
!

35. Defining dimension: change display property of anchors
!
!
!

36. Clear the footer
!
!
!
!
!

37. Clear the footer
When you float an element, their containing element no
longer recognizes their width or height (the are out of the
“flow”). This becomes and issue if the floated content is
taller than the containing element. There are several ways
to fix this; the easiest way is to set the overflow property
on the containing div to “auto”.
.containing-div {
overflow: auto
}"
!
!

38. Make it responsive
!
@media only screen and (max-width: 767px) {
body {
width: 100%;
}
article {
width: auto;
margin: 20px;
}
h1 {
padding: 0 20px;
}
}

39. Floats and Positioning

40. There are four basic declarations
you can use to position your boxes:
float: left (or right)
position: relative
position: fixed
position: absolute

41. The normal flow & position:static
Static positioning is the default – this is referred to as the
“normal flow”.
block boxes are positioned on a page one after the other
(in the order they're written in the HTML). They start in the
upper left of the containing box and stack from top to
bottom. The distance between each box is defined by the
margins with top and bottom margins collapsing into one
another.
!
!
!
<div id=”header”></div>
<div id=”content”></div>
<ul id=”sidebar-nav”></ul>

44. float
A floated element takes the element out of the normal
flow and moves it to the far right or left of the containing
element. Existing content will then flow around it. Floated
elements should always have at least a width property.
.photo {
float: left;
max-width: 150px;
}"
!
!

45. Class Exercise
!
4 Float

47. Class Exercise
!
5 Two-Column layout

50. Class Exercise
!
6 Fixed/Flexible Hybrid Layout

51. Positioning Properties
There are four values that you can give to the position property:
!
static Elements renders in order, as they appear in the document
flow. This is default.
relative The element is positioned relative to its static position, so
“left:20” adds 20 pixels to the element’s LEFT position.
absolute The element is positioned relative to its first positioned
(not static) ancestor element (usually, the first parent with
position:relative).
fixed The element is positioned relative to the browser window.

52. Class Exercise
!
7 Positioning

53. boxes exercise
.box {
"" width: 300px;
"" height: 300px;
"" border: 1px solid #333;
"" margin: 10px;
"" display: inline-block;
}" "
.relative {
"" position: relative;
"" top: 50px;
"" left: -50px;
}"
.fixed {
"" position: fixed;
"" bottom: 0;
"" left: 0;
}"
!
!

54. boxes exercise
.box.absolute {
"" position: relative;
}"
.box.absolute p {
"" position: absolute;
"" top: 0;
"" right: 0;
"" background: #444;
"" padding: 10px;
"" margin: 0;
"" color: #fff;
}"
!
!
!

55. relative
A relative positioned element moves the element out of
it’s position in the normal flow, and allows you to move it
“relative” to that location. The space taken by the original
location is retained in the flow.
.date {
position: relative;
top: 40px;
left: -105px;
}"
!
!

56. relative exercise
!
!
.date {
!
position: relative;
top: 40px;
left: -105px;
}"
!
!

57. fixed
A fixed element is taken complete out of the document
flow, and is positioned relative to the browser window.
.create-change {
position: fixed;
bottom: 40px;
right: 0;
}"
!
!

58. fixed exercise
!
!
.create-change {
!
position: fixed;
bottom: 40px;
right: 0;
}"
!
!

59. absolute
The element is positioned relative to its first positioned
(not static) ancestor element. The element and its spacing
are completely taken out of the flow. In the example
below, the “.post” parent element is given a position
value of relative, which lets us set it’s child element “.icon”
within it.
.post {
position: relative;
}"
.icon {
position: absolute;
left: -60px;
right: 0;
}"
!
!

60. absolute exercise
!
!
.post {
!
position: relative;
}"
.icon {
position: absolute;
left: -60px;
right: 0;
}"
!
!