CSS Layout Basics

Download the exercise/demo code

Download the code for this unit:

​

​

https://github.com/WebDevCourseMaterial/CssLayoutBasics

CSS Layout teaser

Demo first! Lets take a look at the Google CSS walkthrough to start learning about CSS layout.

​

Then we'll explain the details later.

​

We just want to see some of the properties in action via a demo first.

Box model

Example

Example

The visual box is 482 pixels wide and 282 pixels tall.

Visual box = Content size + padding + border

The margin is a transparent force field.

margin

http://www.w3schools.com/css/css_margin.asp

​

Granular properties:

margin-top: 100px;

margin-bottom: 100px;

margin-right: 50px;

margin-left: 50px;

​

Shorthand (top, right, bottom, left):

margin: 100px 50px;

margin: 100px 50px 100px;

margin: 100px 50px 100px 50px;

margin shorthand practice

Granular properties:

margin-left: 25px;

margin-right: 50px;

margin-top: 100px;

​

​

Write the shorthand:

​

​

margin: __________________________________ ;

margin shorthand practice

Shorthand:

div {

margin-right: 50px;

margin: 100px 20px;

}

​

How did the margins just get set?

​

margin-top: _________________________ ;

margin-bottom: _________________________ ;

margin-right: _________________________ ;

margin-left: _________________________ ;

padding

http://www.w3schools.com/css/css_padding.asp

​

Granular properties:

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

​

Shorthand (top, right, bottom, left):

padding:25px 50px;

padding:25px 50px 25px;

padding:25px 50px 25px 50px;

​

Box model with Chrome dev tools

Open the demo.

​

box_model/

three_boxes.html

​

Right click to inspect element.

Positioning the box model

Flow / block style:

• display
• position
• float

Size:

• width
• height

​

Position:

• left
• top
• right
• bottom

​

These default to 'auto'

Defaults

display: block or inline

position: static

float: none

Display property

http://www.w3schools.com/cssref/pr_class_display.asp

​

p.block {

display: block;

}

p.inline {

display: inline;

}

p.inline-block {

display: inline-block;

}

p.none {

display: none;

}

​

Display block (user agent default for div)

display_property/

display_block.html

Display inline

display_property/

display_inline.html

width

height

Display inline-block

display_property/

display_inline_block.html

Display block, none, then inline

display_property/

display_block_none_inline.html

Position property

http://www.w3schools.com/cssref/pr_class_position.asp

​

div.static {

position: static;

}

div.relative {

position: relative;

}

div.absolute {

position:absolute;

}

div.fixed {

position: fixed;

}

position: static;

position_property/

position_static.html

right

top

position: relative;

position_property/

position_relative.html

position: absolute;

position_property/

position_absolute.html

Out of the flow

position: fixed;

position_property/

position_fixed.html

Out of the flow

Position property

http://www.w3schools.com/cssref/pr_class_position.asp

​

div.static {

position: static;

}

div.relative {

position: relative;

}

div.absolute {

position:absolute;

}

div.fixed {

position: fixed;

}

Positioned

Positioned

Positioned

Out of the flow

Out of the flow

Questions you should ask

• Is it in the flow (do other elements leave space for it)?
• Yes (static, relative) - It takes up space. Other element respect it.
• Is it positioned (does it display outside in the space left)?
• Yes (relative) - Leave in flow but adjust display position
• No (static) - Ignore position and display in flow location
• No (absolute, fixed) - Not in page flow (no space), forced to block display ignore display setting, always positioned

​

• Is it block or inline (or inline-block)?
• Block - Respect the size properties, line to itself. This is my horizontal space and I don't share!!!
• Inline - Ignore the size properties, put in the flow, adjust location only if relative position
• Inline-Block - Respect the size properties, however default is wrap-content instead of full line, other elements welcome on my line.

Display and position exercises

Work the first three exercises for display and position.

​

Exercise instructions

Interactions between properties

Flow / block style

• display
• position
• float

​

Box model properties

• margin
• padding
• border

​

​

​

Size

• width
• height

​

Position

• left
• top
• right
• bottom

​

Experiment time

When do the size and position properties get ignored?

Size = width & height

Position = top, left, right, & bottom

block static

block = respect size

static = ignore position

block relative

block = respect size

relative = respect position

inline static

inline = ignore size

static = ignore position

inline relative

inline = ignore size

relative = respect position

inline-block static

inline-block = respect size

static = ignore position

inline-block relative

inline-block = respect size

relative = respect position

block absolute

absolute = ignore display, respect size, respect position

block = ignored (forced to block)

inline absolute

absolute = ignore display, respect size, respect position

block = ignored (forced to block)

inline-block absolute

absolute = ignore display, respect size, respect position

block = ignored (forced to block)

Experiment results

When do the size and position properties get ignored?

Size = width & height

Position = top, left, right, & bottom

Summary (in priority order)

1. If display is none then display wins.
1. It's like the element was never existed.
2. If position is absolute or fixed then position wins
• Out of the flow forced to block (inline meaningless)
3. (intentionally left blank for now)
4. Display as a happy combination
• block static block relative
• inline static inline relative
• inline-block static inline-block relative

Organized results

2. Out of the flow

4. Happy combination

1. Display is none (don't even look at anything else)

Lab 0 - Lights Out CSS Only

With CSS

Without CSS

Lab 0 Instructions

We're not done?

This matrix has another dimension.

​

​

​

Float Property

Float property

http://www.w3schools.com/cssref/pr_class_float.asp

​

img.right {

float: right;

}

img.left {

float: left;

}

img.none {

float: none;

}

​

Float none (the default)

float: none;

​

Float left

Both are

float: left;

​

Float right

Both are

float: right;

​

Clearing a float (nobody on my...)

Both are

float: left;

clear: left;

​

Float exercises

Work the three float exercises.

​

Exercise instructions

Experiment time?

float: right;

​

float: left;

​

float: none;

​

Float set, but Absolute on

Position: absolute wins. Float setting is ignored (much like the display gets ignored)

float: right;

​

float: left;

​

Float left ignores display respect relative

Float right ignores display respect relative

Summary (in priority order)

• If display is none then display wins.
• It's like the element was never there.
• If position is absolute or fixed then position wins
• Out of the flow.
• If float was set ignore. Force float to none.
• If display was set ignore. Force display to block.
• If float is left or right then float wins
• If display was set ignore. Force to inline-block.
• Respect relative property for position if set.
• Display as an happy combination
• block static block relative
• inline static inline relative
• inline-block static inline-block relative
• float static float relative

Floats gone wild

Not as exciting as you might think

Starting point (no problems yet)

float: none;

​

Floats that don't fit on the line

float: left;

​

Same problem on the right side

float: right;

​

Float interacting with a non-float

float: left;

​

float: none;

​

Out of the flow with regard to parent

float: left;

clear: left;

​

Containing a float via overflow: hidden;

.wrapper {

overflow: hidden;

}

​

float: left;

clear: left;

​

Parent has the property

overflow hidden

​

Contain your floats

.row {

overflow: hidden;

}

​

CSS Layout example again

Demo again! Lets take a look at the Google CSS walkthrough again.

​

Can you guess correctly what every line will do?

​

​

Add to the end a rule to contain the floats.

#wd-c {overflow: hidden; }

​