1. CSS
Box Model and Page Layouts

2. 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.

3. Box Model
Margin
Border
Padding
Width
Height
Content

4. 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

5. 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)

6. 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.

7. Containing Blocks
Block boxes can contain other boxes within
them.
<div id=quot;boxquot;> Inline Block
First line of text
Containing Block
<p>Paragraph of text</p>
</div>

8. 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.

9. 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.

10. Clearing Floats
• The quot;clearquot; property is used to push down
content that follows a floated box.
• Can take the following values: left, right, both