Layout Basics
Learn the basics of CSS layout including positioning and display properties
🎯 🏗️ Building the Structure of Modern Websites
- Think about newspaper and magazine layouts. How do they organize information to guide your reading?
- What makes some website layouts feel intuitive and others feel confusing?
- How do layouts need to adapt when you switch from desktop to mobile?
Learning Objectives
By the end of this lesson, you'll be able to:
- ✓ Understand Understand how the display property controls element behavior in document flow
- ✓ Master static, relative, absolute, and fixed positioning strategies
- ✓ Create Create multi-column layouts using float-based techniques
- ✓ Implement clearfix solutions to manage float behavior
- ✓ Build classic layouts like the Holy Grail and sidebar patterns
- ✓ Debug common layout issues with positioning and floats
- ✓ Recognize when to use traditional layout methods vs. modern alternatives
Layout Fundamentals
The Display Property
The display property determines how an element behaves in the document flow.
Common Display Values:
- block: Takes up full width, starts on new line
- inline: Flows with text, no width/height
- inline-block: Flows with text but accepts width/height
- none: Removes element from document flow
CSS Positioning
Positioning allows you to control where elements appear on the page. Understanding the relationship between parent and child positioning is crucial.
Position Values:
Position Values:
- static: Default flow (not positioned)
- relative:
- Positioned relative to normal position
- Creates a positioning context for absolute children
- absolute:
- Positioned relative to nearest positioned ancestor
- If no positioned ancestor, positions to viewport
- fixed: Positioned relative to viewport, stays during scroll
Float and Clear
Float moves elements to the left or right, allowing content to wrap around them. Clear prevents elements from wrapping around floated elements.
Float Behavior:
Basic Float Example:
This text will wrap around the floated element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Two-Column Layout with Float:
5. Common Mistakes to Avoid
- Don't use fixed heights unless absolutely necessary
- Avoid mixing different positioning methods unnecessarily
- Don't forget to clear floats
- Avoid deep nesting of elements
Common Layout Techniques
Two Column Layout
Holy Grail Layout
Basic Layout Patterns
The Stack Pattern
The Stack pattern creates consistent vertical spacing between elements. This is one of the most fundamental layout patterns in web design.
Stack Example
First paragraph of text.
Second paragraph with spacing.
The Box Pattern
The Box pattern creates contained content with consistent padding and optional borders or backgrounds.
Box Title
Content inside a box with padding.
The Center Pattern
The Center pattern creates horizontally centered content, commonly used for main page containers.
Centered Content
This content is centered on the page.
Common Layout Structures
The Cluster Pattern
The Cluster pattern groups related items together, like navigation links or tags.
The Grid Pattern
A basic grid layout using floats and percentage widths.
⏸️ Pause & Check: Do You Understand?
Before moving forward, can you answer these?
- What is the difference between display: block, display: inline, and display: inline-block?
- How does position: relative differ from position: absolute?
- What is the purpose of z-index and when can it be used?
- When should you use floats in modern CSS?
Check Your Answers
- block elements take full width and start on new lines (div, p, h1). inline elements only take needed space and flow with text (span, a, strong). inline-block combines both: flows inline but accepts width/height like blocks.
- relative positions elements relative to their normal position in the document flow, keeping their space reserved. absolute removes elements from the flow and positions them relative to the nearest positioned ancestor. relative is often used to create positioning contexts for absolute children.
- z-index controls stacking order of positioned elements (relative, absolute, fixed, or sticky). Higher values appear on top. z-index only works on positioned elements and creates stacking contexts. It's commonly used for modals, dropdowns, and overlays.
- Floats were historically used for layouts but are now primarily for text wrapping around images. Modern layouts should use Flexbox or Grid instead. Floats remove elements from normal flow and require clearfix techniques to contain them properly.
How confident are you with this concept?
😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!
Practical Exercises
Black Swan Bistro Layout
Requirements
- Create a centered container for the main content
- Implement a two-column layout using floats for the menu section
- Add proper spacing between menu items using the stack pattern
- Create a sidebar layout for the specials section
Steps
- Set up the centered container:
- Create the menu section with two columns:
- Style the menu items with proper spacing:
- Implement the specials sidebar:
Personal Profile Page Layout
Requirements
- Create a centred hero area for Alex Chen's introduction
- Use a two-column layout for the about and skills sections
- Implement a cluster pattern for the navigation links
- Add proper stack spacing between sections
Steps
- Set up the main container:
- Style the sidebar:
- Create the hero and content sections:
- Add the navigation:
Lesson checkpoint
Test Your Knowledge
Strengthen your understanding of Layout by answering the quiz below.
Layout Quiz
Test your understanding of Layout concepts.
Lesson Complete: What You Learned
Key Takeaways:
- display property controls how elements participate in layout (block, inline, inline-block, none)
- position property offers five values: static (default), relative, absolute, fixed, sticky
- z-index controls stacking order for positioned elements in the same stacking context
- Floats remove elements from normal flow and were historically used for layouts
- Modern layouts prefer Flexbox and Grid over floats for better control and maintainability
- Understanding document flow and positioning is fundamental to CSS layout mastery
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- ✅ Master display values: block, inline, inline-block, and none Check!
- ✅ Understand position values: static, relative, absolute, fixed, sticky Got it!
- ✅ Control stacking order with z-index Can explain it!
- ✅ Use floats appropriately (primarily for text wrapping) Could teach this!
- ✅ Understand document flow and how positioning affects it Check!
- ✅ Debug layout issues using browser DevTools Got it!
If you can confidently answer "yes" to most of these, you're ready to move on!
Think & Reflect:
Layout Strategy
- How do display and position work together to create layouts?
- When should you use absolute positioning versus Flexbox/Grid?
Document Flow
- What happens to document flow when you use position: absolute?
- How do floats affect surrounding elements?
🤔 Real-World Test:
Professional websites use a combination of layout techniques. Fixed navigation bars use position: fixed. Modal dialogs use position: absolute or fixed with high z-index. Content sections use Flexbox or Grid. Understanding when and why to use each technique separates good developers from great ones.
Modern CSS has evolved beyond floats for layout, but understanding legacy techniques helps you maintain older codebases and appreciate why Flexbox and Grid were revolutionary improvements to CSS layout capabilities.
🎯 Looking Ahead:
Now that you understand layout fundamentals, you're ready to dive into CSS colors and backgrounds. In the next lesson, you'll master color systems (hex, RGB, HSL), opacity, gradients, and background properties that bring visual richness to your designs.
Color theory and background techniques are essential for creating visually appealing, accessible websites that capture attention and guide user focus.
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
Flexbox BasicsRelated Topics
Explore these related tutorials to expand your knowledge:
Practice Projects
Apply what you've learned with these hands-on projects:
Additional Resources
Deepen your understanding with these helpful resources:
- MDN: CSS Layout - Guide to CSS layout techniques
Progress tracking is disabled. Enable it in to track your completed tutorials.
Cookie Settings