CSS Layout and Box Model

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

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

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: 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;
}

• 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;
}

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

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

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

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

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