Courses Learn Blog Contact
Get Started →
Home  /  Free Lessons  /  Frontend Basic
Lesson 4

CSS Positioning and Simple Layout

Frontend Basic 11 min read Free

Day 4: Mastering Page Layout Control

From Spacing to Layout

You've learned how to style individual elements with colors, fonts, and spacing. But how do you control where those elements appear on the page? How do you create a horizontal navigation bar instead of a vertical list? How do you make an element stay in one place while the page scrolls?

Today, you'll learn how CSS controls the flow and positioning of elements on your page. This is fundamental to creating professional layouts before we dive into modern layout systems like Flexbox and Grid.

Today's Goal: Understand how elements naturally flow on a page, how to change that flow with display properties, and how to position elements precisely where you want them. You'll create a professional header with horizontal navigation and a clean, stacked card layout.

Display Types: How Elements Behave

Every HTML element has a default display type that determines how it behaves in the page flow. Understanding these is crucial for creating layouts.

Block Elements

Block elements take up the full width available and always start on a new line. They stack vertically like blocks.

Default Block Elements: div, p, h1-h6, section, header, footer, ul, li

div {
    display: block;
    background: #3498db;
    padding: 20px;
    margin-bottom: 10px;
}

Visual Result:

Block Element 1 - Full Width
Block Element 2 - Full Width
Block Element 3 - Full Width

Notice: Each element takes the full width and stacks vertically

Block Element Characteristics:
• Takes up full width available
• Always starts on a new line
• Can have width and height set
• Can have margin and padding on all sides

Inline Elements

Inline elements only take up as much width as their content needs and don't start on a new line. They flow with text like words in a sentence.

Default Inline Elements: span, a, strong, em, img

span {
    display: inline;
    background: #3498db;
    color: white;
    padding: 5px 10px;
}

Visual Result:

This is a paragraph with inline element 1 and inline element 2 flowing within the text naturally.

Notice: Inline elements flow with the text and don't break to new lines

Inline Element Characteristics:
• Only takes up width of content
• Flows with surrounding content
• Cannot have width and height set
• Vertical margins/padding don't push other elements away
Important: Setting width and height on inline elements won't work. The element will ignore these properties.

Inline-Block Elements

Inline-block combines the best of both worlds: elements flow inline like text, but you can set width, height, and all margins/padding like block elements.

.box {
    display: inline-block;
    width: 150px;
    height: 100px;
    background: #3498db;
    color: white;
    padding: 20px;
    margin: 10px;
}

Visual Result:

Box 1
150x100
Box 2
150x100
Box 3
150x100

Notice: Elements sit side-by-side but can have width and height

Inline-Block Element Characteristics:
• Flows inline with other content
• Can have width and height set
• Respects all margins and padding
• Perfect for horizontal navigation menus

Changing Display Types

You can change any element's display type. This is commonly done to make lists horizontal or to control element behavior.

Example: Making a list horizontal

/* By default, li is block (vertical) */
nav li {
    display: inline-block;  /* Now they're horizontal */
    margin: 0 10px;
}

Before (block):

  • Home
  • About
  • Contact

After (inline-block):

  • Home
  • About
  • Contact

CSS Positioning: Precise Control

The position property determines how an element is positioned in the document. Different position values enable different behaviors and use cases.

Static Positioning (Default)

This is the default. Elements follow the normal document flow. The top, right, bottom, and left properties have no effect.

div {
    position: static;  /* This is the default */
}

Static elements cannot be moved with top, right, bottom, or left properties. They just flow naturally.

Relative Positioning

Positioned relative to its normal position. The element still takes up its original space in the document flow, but visually appears shifted.

.shifted {
    position: relative;
    top: 20px;      /* Move 20px down from normal position */
    left: 30px;     /* Move 30px right from normal position */
}

Visual Demonstration:

Normal Flow Box 1
Relatively Positioned - Shifted 20px down, 30px right
Normal Flow Box 3 - Notice the gap above where Box 2 was

The space where the blue box would normally be is preserved

Use Case: Relative positioning is often used as a reference point for absolute positioning of child elements (more on this below).

Absolute Positioning

Removed from the normal document flow. Positioned relative to its nearest positioned ancestor (or the viewport if none exists). Other elements act as if it doesn't exist.

.container {
    position: relative;  /* Creates positioning context */
    height: 200px;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

Visual Demonstration:

Product Card (position: relative)

This container has position: relative, creating a positioning context for its children.

NEW
$29.99

The badges are absolutely positioned within the container

Absolute Positioning Rules:
• Element is removed from document flow
• Positioned relative to nearest positioned ancestor
• If no positioned ancestor, positioned relative to viewport
• Perfect for overlays, badges, tooltips, dropdowns

Common Positioning Pattern

The most common pattern is to set a parent to position: relative and the child to position: absolute. This lets you position the child anywhere within the parent.

/* HTML */
<div class="card">
    <span class="status">Online</span>
    <h3>User Profile</h3>
</div>

/* CSS */
.card {
    position: relative;  /* Parent */
    padding: 20px;
}

.status {
    position: absolute;  /* Child */
    top: 0;
    right: 0;
    background: #2ecc71;
}

Basic Layout Techniques

Before modern layout systems like Flexbox and Grid, developers used these fundamental techniques. They're still useful and important to understand.

Centering with Margin Auto

The classic way to center a block element horizontally on the page.

.container {
    max-width: 1200px;  /* Set a maximum width */
    margin: 0 auto;     /* Center it horizontally */
    padding: 0 20px;    /* Add side padding */
}

Visual Result:

Centered Container
max-width: 500px, margin: 0 auto

Stacked Card Layout

The simplest layout: cards stacked vertically. This is achieved naturally with block elements, enhanced with proper spacing and styling.

.card {
    background: white;
    padding: 30px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Visual Result:

Project Card 1

Clean vertical stacking with consistent spacing

Project Card 2

Each card is independent and easy to scan

Project Card 3

Professional and readable layout

Full-Width Header with Centered Content

A common pattern: header spans full width, but content inside is centered with max-width.

header {
    background: #2c3e50;
    padding: 20px 0;      /* Vertical padding */
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;       /* Center the content */
    padding: 0 20px;      /* Side padding */
}

Visual Result:

Full-Width Header

Content is centered with max-width

Width Control for Readability

Text becomes hard to read when lines are too long. Limit content width for better readability.

Too Wide (hard to read):

This is a very long line of text that spans the entire width of the container. Research shows that lines longer than 75 characters become difficult for readers to track from the end of one line to the beginning of the next. This creates eye fatigue and reduces reading comprehension significantly.

Optimal Width (comfortable to read):

This text has a max-width of 600px. Notice how much easier it is to read? The optimal line length is 50-75 characters. This creates comfortable reading that doesn't strain the eyes.

Pro Tip: For main content, use max-width between 600px-900px. For single-column text (like blog posts), aim for 600px-700px for optimal readability.

Styling Navigation Menus

Navigation is one of the most important parts of any website. Let's explore different navigation styles from basic to sophisticated.

Basic Horizontal Navigation

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    display: inline-block;
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: #333;
}

Visual Result:

Styled Navigation with Hover

nav a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    display: inline-block;
}

nav a:hover {
    background: rgba(255,255,255,0.2);
}

Visual Result (hover over links):

Navigation with Active State

nav a {
    color: #666;
    padding: 10px 15px;
    border-bottom: 3px solid transparent;
}

nav a:hover {
    color: #2c3e50;
    border-bottom-color: #3498db;
}

nav a.active {
    color: #2c3e50;
    border-bottom-color: #3498db;
}

Visual Result:

Day 4 Project: Professional Layout Portfolio

Let's build a complete portfolio with professional header navigation, centered content layout, and clean stacked project cards.

Complete HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" c>
    <title>John Doe - Web Developer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <div class="header-content">
            <h1>John Doe</h1>
            <p class="tagline">Full Stack Web Developer</p>
            
            <nav>
                <ul>
                    <li><a href="#about" class="active">About</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section id="about" class="section-card">
            <h2>About Me</h2>
            <div class="profile-container">
                <img src="profile.jpg" alt="John Doe" class="profile-img">
            </div>
            <p>I am a passionate web developer with expertise in modern 
            frontend technologies. My journey in web development began 
            with a fascination for creating user-friendly interfaces.</p>
        </section>

        <section id="skills" class="section-card">
            <h2>Technical Skills</h2>
            <ul class="skills-list">
                <li>HTML5 & CSS3</li>
                <li>JavaScript (ES6+)</li>
                <li>React.js</li>
                <li>Node.js</li>
                <li>Responsive Design</li>
                <li>Git & GitHub</li>
            </ul>
        </section>

        <section id="projects">
            <h2>Featured Projects</h2>
            
            <div class="project-card">
                <div class="project-badge">Featured</div>
                <h3>E-Commerce Platform</h3>
                <p>Full-stack application built with React and Node.js 
                featuring user authentication, product catalog, and 
                payment processing integration.</p>
                <a href="#" class="project-link">View Project →</a>
            </div>
            
            <div class="project-card">
                <h3>Task Management App</h3>
                <p>Productivity application with real-time updates using 
                WebSockets. Features task creation, assignment, and 
                team collaboration.</p>
                <a href="#" class="project-link">View Project →</a>
            </div>
            
            <div class="project-card">
                <h3>Weather Dashboard</h3>
                <p>Data visualization project using weather APIs with 
                interactive charts and historical data analysis.</p>
                <a href="#" class="project-link">View Project →</a>
            </div>
        </section>
    </main>

    <footer id="contact">
        <div class="footer-content">
            <h2>Get In Touch</h2>
            <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
            <p>LinkedIn: <a href="#">linkedin.com/in/johndoe</a></p>
            <p class="copyright">&copy; 2024 John Doe. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

Complete CSS Stylesheet

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    color: #333;
    background: #f5f5f5;
    line-height: 1.6;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

h2 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 20px;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
}

h3 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
}

/* ===== HEADER ===== */
header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px 0;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

header h1 {
    color: white;
}

.tagline {
    font-size: 20px;
    margin-bottom: 30px;
    opacity: 0.95;
}

/* ===== NAVIGATION ===== */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    display: inline-block;
    margin: 0 10px;
}

nav a {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: background 0.3s ease;
}

nav a:hover,
nav a.active {
    background: rgba(255, 255, 255, 0.25);
}

/* ===== MAIN CONTENT ===== */
main {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ===== SECTION CARDS ===== */
.section-card {
    background: white;
    padding: 40px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== PROFILE ===== */
.profile-container {
    text-align: center;
    margin-bottom: 25px;
}

.profile-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 5px solid #3498db;
    object-fit: cover;
}

/* ===== SKILLS LIST ===== */
.skills-list {
    list-style: none;
}

.skills-list li {
    display: inline-block;
    background: #ecf0f1;
    padding: 12px 20px;
    margin: 5px;
    border-left: 4px solid #3498db;
    border-radius: 5px;
}

/* ===== PROJECTS SECTION ===== */
#projects {
    margin-bottom: 40px;
}

#projects h2 {
    background: white;
    padding: 30px 40px 20px 40px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== PROJECT CARDS ===== */
.project-card {
    position: relative;
    background: white;
    padding: 35px;
    margin-bottom: 25px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.project-card:hover {
    border-color: #3498db;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
    transform: translateY(-2px);
}

.project-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e74c3c;
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

.project-card h3 {
    color: #3498db;
    margin-top: 0;
}

.project-link {
    display: inline-block;
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
}

.project-link:hover {
    text-decoration: underline;
}

/* ===== FOOTER ===== */
footer {
    background: #2c3e50;
    color: white;
    padding: 40px 0;
    margin-top: 60px;
}

.footer-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

footer h2 {
    color: white;
    border: none;
}

footer a {
    color: #3498db;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.copyright {
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.8;
}

Key Layout Features Explained

Full-Width Header
Header spans full width with gradient background. Content inside is centered with max-width: 1200px
Horizontal Navigation
List items use display: inline-block to sit horizontally. Hover effects provide feedback
Centered Content
Main content has max-width: 900px and margin: 0 auto to center on page
Stacked Card Layout
Project cards naturally stack vertically with consistent margin-bottom spacing
Absolute Positioning Badge
Featured badge uses position: absolute within position: relative parent card
Inline-Block Skills
Skills display: inline-block to wrap naturally while maintaining size control

Testing Checklist

  • Header spans full width with gradient background
  • Navigation links are horizontal and have hover effects
  • Active navigation link is highlighted
  • Main content is centered on the page (max-width applied)
  • Section cards have white background and shadows
  • Project cards stack vertically with even spacing
  • First project has "Featured" badge in top-right corner
  • Project cards have hover effects (border color change, shadow, slight lift)
  • Skills display as inline-block tags that wrap
  • Footer is full-width with centered content
  • Page looks clean and readable on desktop (no horizontal scroll needed)

Learn this with a real instructor

Free lessons take you a long way on your own. The full programmes add live classes, assignments, Skill Points and a certificate — built for African students.