CSS
Box Model and Page Layouts

Box Model
Every web page element is contained in a box with the
following components:
• The core content
• Padding around the Content
• Border around padding to delineate the visible area.
• Margin around the border that separates it from other
content boxes.

Box Model
Margin
Border
Padding
Width
Height
Content

Calculating Content Width
Total content width is calculated as follows:
Width of content + right-padding + left-padding +
right-border + left-border
Border
Padding
Content
10 px 10 px
20 px Width = 200px 20 px
200+20+20+10+10 = 280 px

Calculating IE Box Width
IE calculates the content box width as follows:
* Content = content + borders + padding
Border
Padding
content
10 px 10 px
Width = 140 px
20 px 20 px
Width
(200 px)

Boxes
Two types of boxes:
Block: Generated by HTML like P, DIV,
Header tags, etc.
Inline: Generated by actual content (images
and text), and inline elements like the
<strong> and <em> tags.

Containing Blocks
Block boxes can contain other boxes within
them.
<div id=\"box\"> Inline Block
First line of text
Containing Block
<p>Paragraph of text</p>
</div>

Normal Flow
• Normal browser behaviour.
• Everything defaults to the left unless otherwise
modified.
• Block boxes flow vertically from top to bottom
in their containing blocks.
• Inline boxes flow left to right.
• Vertical margins are collapsed.

Float
• Introduced to enable positioning of elements to
left or right, and have content flowing around
them.
• Now used to position boxes for layout
purposes.
• Top of the floated box is aligned with the top of
the inline text so other content flows around it.
• All floated boxes should have a width defined.
• Vertical margins of a floated box are not
collapsed.

Clearing Floats
• The \"clear\" property is used to push down
content that follows a floated box.
• Can take the following values: left, right, both