← Back to Module

CSS Layout and Box Model

CMU422: Fundamentals of Web Design - Session 4

Birmingham Newman University

Lecturer: James Williams

Understanding layout flow and element positioning

3-hour session • 27 slides • 2 interactive tasks

Session Timeline:

  • 10 min: Registration & waiting
  • 20 min: Opening slides
  • 45 min: Task 1
  • 15 min: Break/Catch up
  • 20 min: Secondary slides
  • 45 min: Task 2
  • Remaining: Self-study

Learning Objectives

  • Master the CSS box model concept
  • Understand display properties and their effects
  • Learn positioning techniques
  • Create responsive layouts
  • Apply layout best practices

The CSS Box Model

Every HTML element is treated as a box with content, padding, border, and margin
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}
Content Area

Try It: Interactive Box Model

10px
3px
20px
Content

Current Box Model Values:

Margin: 10px

Border: 3px solid

Padding: 20px

Content: 200px × 100px

Drag the sliders to see how margin, border, and padding affect the box model!

Box Sizing Property

/* Default behavior */
.default-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* Total width = 200 + 40 + 4 = 244px */
}

/* Include padding and border in width */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* Total width = 200px */
}

Display Property Values

/* Block elements */
.block { display: block; }

/* Inline elements */
.inline { display: inline; }

/* Inline-block elements */
.inline-block { display: inline-block; }

/* Hidden elements */
.hidden { display: none; }

/* Table elements */
.table { display: table; }
.table-cell { display: table-cell; }

Block vs Inline Elements

Block Element 1
Block Element 2
Inline Element 1 Inline Element 2
  • Block: Full width, starts on new line
  • Inline: Only takes needed width, no line breaks
  • Inline-block: Combines both behaviors

CSS Positioning

/* Static (default) */
.static { position: static; }

/* Relative */
.relative { position: relative; top: 10px; left: 20px; }

/* Absolute */
.absolute { position: absolute; top: 0; right: 0; }

/* Fixed */
.fixed { position: fixed; bottom: 20px; right: 20px; }

/* Sticky */
.sticky { position: sticky; top: 0; }

Relative Positioning

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
  background: #e7f3ff;
  border: 2px solid #007bff;
  padding: 15px;
}
Relative positioned element
  • Moves element relative to its normal position
  • Original space is preserved
  • Other elements are not affected

Absolute Positioning

.container {
  position: relative;
  height: 200px;
  border: 2px solid #333;
}

.absolute-box {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #ffc107;
  padding: 10px;
}
Absolute positioned

Fixed Positioning

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  color: white;
  z-index: 1000;
}

.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #007bff;
  color: white;
  padding: 15px;
  border-radius: 50%;
}
  • Positioned relative to viewport
  • Stays in place when scrolling
  • Common for headers, navigation, and floating buttons

Z-Index and Stacking

.background {
  z-index: 1;
  background: #e7f3ff;
}

.middle {
  z-index: 2;
  background: #ffc107;
}

.foreground {
  z-index: 3;
  background: #dc3545;
}
  • Controls stacking order of positioned elements
  • Higher values appear on top
  • Only works with positioned elements
  • Creates stacking contexts

Float Property

.float-left {
  float: left;
  width: 200px;
  margin-right: 20px;
}

.float-right {
  float: right;
  width: 200px;
  margin-left: 20px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Moves element to left or right
  • Text flows around floated elements
  • Requires clearfix to contain floats
  • Being replaced by Flexbox and Grid

Clear Property

.clear-left { clear: left; }
.clear-right { clear: right; }
.clear-both { clear: both; }
.clear-none { clear: none; }

/* Modern clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Prevents element from being next to floated elements
  • left: Clear left floats
  • right: Clear right floats
  • both: Clear both sides

Responsive Design Basics

/* Mobile first approach */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Tablet styles */
@media (min-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .container {
    padding: 0 40px;
  }
}

Media Queries

/* Small screens */
@media (max-width: 767px) {
  .sidebar { display: none; }
  .main { width: 100%; }
}

/* Medium screens */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: 200px; }
  .main { width: calc(100% - 200px); }
}

/* Large screens */
@media (min-width: 1024px) {
  .sidebar { width: 250px; }
  .main { width: calc(100% - 250px); }
}

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Essential for responsive design
  • Controls how page is displayed on mobile devices
  • width=device-width: Match viewport to device width
  • initial-scale=1.0: Set initial zoom level
  • Prevents mobile browsers from scaling down desktop layouts

Task 1: Layout Practice

Instructions:

  1. Create a new HTML file called layout-practice.html
  2. Build a layout with the following elements:
    • Header: Fixed at top, full width, dark background
    • Sidebar: Fixed width (200px), positioned on left
    • Main content: Takes remaining width
    • Footer: At bottom, full width
  3. Use different background colors for each section
  4. Add sample content to each section
  5. Make sure the layout works with different content lengths
  6. Test with browser developer tools

Time: 45 minutes

This task will help you understand CSS layout and positioning

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

Layout Best Practices

  • Use semantic HTML elements
  • Plan your layout before coding
  • Consider mobile-first approach
  • Test on different screen sizes
  • Use CSS Grid and Flexbox for modern layouts
  • Avoid excessive nesting
  • Keep layouts simple and maintainable
Remember: Good layouts are both functional and accessible.

Common Layout Patterns

  • Single Column: Simple, mobile-friendly
  • Two Column: Sidebar + main content
  • Three Column: Left sidebar + main + right sidebar
  • Grid Layout: Card-based layouts
  • Sticky Header: Navigation that stays visible
  • Hero Section: Large banner area
  • Footer: Bottom information area

CSS Reset vs Normalize

/* CSS Reset - removes all defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Normalize - preserves useful defaults */
/* Use normalize.css for better cross-browser consistency */
  • Reset: Removes all browser defaults
  • Normalize: Preserves useful defaults, fixes bugs
  • Choose based on project needs
  • Normalize is generally recommended

Layout Debugging Tips

  • Use browser developer tools
  • Add temporary borders to see element boundaries
  • Check box model calculations
  • Verify positioning context
  • Test with different content lengths
  • Check for overflow issues
  • Validate CSS syntax
/* Debug with borders */
* { border: 1px solid red !important; }

Layout Performance

  • Avoid layout thrashing (multiple reflows)
  • Use transform instead of changing position
  • Batch DOM changes when possible
  • Use will-change for animations
  • Minimize use of position: absolute
  • Consider CSS containment
Tip: Use browser dev tools to profile layout performance.

Accessibility Considerations

  • Maintain logical tab order
  • Ensure sufficient color contrast
  • Provide focus indicators
  • Use semantic HTML elements
  • Test with screen readers
  • Ensure keyboard navigation works
  • Don't rely solely on visual positioning

Task 2: Responsive Website Layout

Instructions:

  1. Create a new HTML file called responsive-layout.html
  2. Build a responsive website with:
    • Mobile (default): Single column layout
    • Tablet (768px+): Two column layout
    • Desktop (1024px+): Three column layout
  3. Include navigation that adapts to screen size
  4. Add images that scale appropriately
  5. Ensure text remains readable at all sizes
  6. Test on different devices or browser dev tools
  7. Add smooth transitions between breakpoints

Time: 45 minutes

This task will help you understand responsive design and media queries

CSS Grid Preview

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
}

.grid-item {
  background: #e7f3ff;
  padding: 20px;
}
  • Modern two-dimensional layout system
  • More powerful than Flexbox for complex layouts
  • Will be covered in detail in Session 5
  • Excellent for overall page layouts

Common Layout Issues

  • Elements not positioning correctly: Check positioning context
  • Layout breaking on mobile: Add viewport meta tag
  • Floats not clearing: Use clearfix or clear property
  • Z-index not working: Ensure element is positioned
  • Responsive issues: Check media query syntax
  • Box model confusion: Use box-sizing: border-box

Session Summary

  • Master the box model for precise layouts
  • Use positioning to control element placement
  • Create responsive designs with media queries
  • Follow best practices for maintainable layouts
  • Test layouts across different devices

Next Session:

CSS Flexbox and Grid - Modern layout techniques