CSS Layout Basics

Master Positioning, Display, and Layout Fundamentals

📦 Display Properties Explorer

Experiment with different display values and see their behavior:

Element 1
Element 2
Element 3

inline-block

Elements sit inline but can have width/height set. Great for navigation items and buttons.

  • ✓ Respects width and height
  • ✓ Sits on same line as other inline elements
  • ✓ Respects top/bottom margins and padding

🎯 Position Properties Playground

Learn how different position values affect element placement:

0px
0px
1
Background Content
Positioned Element
More Background Content

Relative Positioning

Element is positioned relative to its normal position. Original space is preserved.

🌊 Float and Clear Demonstration

Understand how floating elements affect document flow:

Floated Box

This is text content that flows around the floated element. When an element is floated, it's removed from the normal document flow and positioned to the left or right of its containing element. The text content will wrap around the floated element.

This paragraph can be cleared to prevent it from wrapping around the floated element. The clear property specifies which sides of an element floating elements are not allowed.

📐 Box Model in Layout Context

See how box model properties affect layout and spacing:

Adjust Box Properties:

10px
20px
5px
Box 1
Box 2
Box 3
Total Width: 200px
Content Width: 150px
Space Between: 20px

💧 Overflow Behavior

Control what happens when content exceeds its container:

10 lines

This is line 1 of content that may overflow the container.

This is line 2 of content that may overflow the container.

This is line 3 of content that may overflow the container.

This is line 4 of content that may overflow the container.

This is line 5 of content that may overflow the container.

This is line 6 of content that may overflow the container.

This is line 7 of content that may overflow the container.

This is line 8 of content that may overflow the container.

This is line 9 of content that may overflow the container.

This is line 10 of content that may overflow the container.

Current Behavior:

With overflow-x: visible and overflow-y: visible, content extends beyond the container boundaries.

🏗️ Stacking Context & Z-Index

Learn how elements stack and how to control layering:

Control Element Layers:

1
2
3
Red Box
Z-Index: 1
Blue Box
Z-Index: 2
Green Box
Z-Index: 3

Stacking Order Rules:

  • Higher z-index values appear on top
  • Elements must have position other than static
  • Parent stacking context affects child elements
  • Elements in the same stacking context use source order

💪 Layout Challenge

Create a classic webpage layout using the positioning techniques you've learned:

Your Task:

Arrange the elements below to create a traditional webpage layout:

  • Header at the top (full width)
  • Navigation below header
  • Main content area on the left
  • Sidebar on the right
  • Footer at the bottom (full width)
📄 Header
🧭 Navigation
📝 Main Content
📋 Sidebar
🔗 Footer
Drop Header Here
Drop Navigation Here
Drop Main Content Here
Drop Sidebar Here
Drop Footer Here

📚 Layout Quick Reference

Display Properties

  • block - Full width, new line
  • inline - Flows with text
  • inline-block - Inline but accepts dimensions
  • flex - Flexible box layout
  • grid - Grid container
  • none - Removes from layout

Position Values

  • static - Normal document flow
  • relative - Relative to normal position
  • absolute - Relative to positioned ancestor
  • fixed - Relative to viewport
  • sticky - Toggles between relative and fixed

Float & Clear

  • float: left/right - Float element
  • clear: left/right/both - Clear floats
  • Use clearfix for container height
  • Modern layouts prefer Flexbox/Grid

Common Layout Patterns

  • Header-Content-Footer: Basic page structure
  • Sidebar Layout: Content + aside
  • Card Grid: Repeating content blocks
  • Sticky Navigation: Fixed header