Back to Unit 6

Unit 6 Website Development - Tutorial 3

3.8 Organise the Main Section into Rows and Columns

Build a main area with two different rows: one row with two section columns, and another row with three section columns.

How To Use This Tutorial

Work through each step in order. Add the HTML first, then add the CSS afterwards. Check the expected output after each step. The final code is visible at the bottom so you can compare your finished work.

Steps

  1. Create the project files
  2. Add the basic HTML page structure
  3. Link the external CSS file
  4. Add the header, main and footer
  5. Add the first row inside main
  6. Add two sections inside the first row
  7. Add the second row inside main
  8. Add three sections inside the second row
  9. Style the body
  10. Style the header and footer
  11. Style the main container
  12. Style each content row
  13. Make the sections stand out
  14. Use Flexbox to create different column rows
  15. Add different colours to each row
  16. Make the layout responsive
Step 1

Step 1 Create the project files

Create a new folder for this tutorial.

Inside the folder, create two files:

  • index.html
  • style.css

Folder structure

main-layout
|
|-- index.html
`-- style.css

What this does

index.html will store the webpage content.

style.css will store the design rules.

Expected output

No webpage output yet. You have only created the files.
Step 2

Step 2 Add the basic HTML page structure

Open index.html and add the basic page structure.

HTML to add

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main Layout Practice</title>
</head>

<body>

</body>
</html>

What this does

This creates the normal structure for an HTML webpage.

The visible content will be added inside the <body>.

Expected output

Blank page. This is correct because no visible content has been added yet.
Step 3

Step 3 Link the external CSS file

Add the stylesheet link inside the <head> section.

Updated head section

<head>
    <meta charset="UTF-8">
    <title>Main Layout Practice</title>
    <link rel="stylesheet" href="style.css">
</head>

What this does

<link> connects the HTML file to the CSS file.

This means the HTML can focus on structure and the CSS can focus on layout and design.

Expected output

Blank page. The CSS file is linked, but no visible content has been added yet.
Step 4

Step 4 Add the header, main and footer

Add the main page areas inside the <body>.

HTML to add inside body

<header>
    <h1>Community Website</h1>
</header>

<main>

</main>

<footer>
    <p>Footer information goes here.</p>
</footer>

What this does

<header> is for the top of the page.

<main> is for the main content of the page.

<footer> is for information at the bottom of the page.

Expected output

Community Website
Footer information goes here.
Step 5

Step 5 Add the first row inside main

Inside <main>, add a <div> for the first row.

HTML to add inside main

<div class="content-row row-one">

</div>

What this does

The content-row class marks this as a row inside the main section.

The row-one class lets you style this row differently later.

Expected output

There is no visible change yet because the row is empty.

Community Website
Footer information goes here.
Step 6

Step 6 Add two sections inside the first row

Add two <section> elements inside the first row.

Updated first row HTML

<div class="content-row row-one">
    <section>
        <h2>Latest News</h2>
        <p>Use this section for important updates.</p>
    </section>

    <section>
        <h2>Upcoming Events</h2>
        <p>Use this section for dates and activities.</p>
    </section>
</div>

What this does

The first row now contains two separate content sections.

Later, CSS will place these sections next to each other as two columns.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Footer information goes here.
Step 7

Step 7 Add the second row inside main

Below the first row, add another <div> for the second row.

HTML to add below the first row

<div class="content-row row-two">

</div>

What this does

This creates another row inside the same <main> area.

Each row can contain a different number of sections.

Expected output

There is no visible change yet because the second row is empty.

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Footer information goes here.
Step 8

Step 8 Add three sections inside the second row

Add three <section> elements inside the second row.

Updated second row HTML

<div class="content-row row-two">
    <section>
        <h2>Clubs</h2>
        <p>Use this section for weekly clubs.</p>
    </section>

    <section>
        <h2>Volunteers</h2>
        <p>Use this section for volunteer information.</p>
    </section>

    <section>
        <h2>Contact</h2>
        <p>Use this section for contact details.</p>
    </section>
</div>

What this does

The second row now contains three separate content sections.

This is useful when one part of a page needs more columns than another part.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.
Step 9

Step 9 Style the body

Open style.css and add the body styling.

CSS to add

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #eef3f8;
    color: #222222;
}

What this does

margin: 0; removes the browser's default gap around the page.

The font, background colour and text colour give the page a clean starting style.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.
Step 10

Step 10 Style the header and footer

Add styling for the top and bottom of the page.

CSS to add

header,
footer {
    background-color: #143d67;
    color: white;
    text-align: center;
    padding: 24px;
}

header h1,
footer p {
    margin: 0;
}

What this does

The header and footer now look like clear page areas.

The padding creates space inside each area.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.
Step 11

Step 11 Style the main container

Add styling for the <main> area.

CSS to add

main {
    max-width: 1100px;
    margin: 30px auto;
    padding: 24px;
    background-color: white;
    border-radius: 12px;
}

What this does

max-width stops the main area becoming too wide on large screens.

margin: 30px auto; adds space above and below the main area and centres it horizontally.

The padding, background colour and border radius make the main area stand out from the page background.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.
Step 12

Step 12 Style each content row

Add styling for the row containers.

CSS to add

.content-row {
    margin-bottom: 24px;
    padding: 16px;
    border-width: 3px;
    border-style: dashed;
    border-color: #8aa4c2;
    border-radius: 12px;
}

.content-row:last-child {
    margin-bottom: 0;
}

What this does

Each row now has its own visible container.

This helps you see that the two-column row and three-column row are separate rows inside <main>.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.
Step 13

Step 13 Make the sections stand out

Add styling for each section.

CSS to add

section {
    padding: 22px;
    border-width: 3px;
    border-style: solid;
    border-color: #2362c9;
    border-radius: 10px;
    background-color: #e8f0ff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

section h2 {
    margin-top: 0;
}

What this does

The sections now look like clear content blocks.

The border, background and shadow make each column easier to identify.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.
Step 14

Step 14 Use Flexbox to create different column rows

Use Flexbox on each row so the sections inside that row become columns.

CSS to add

.content-row {
    display: flex;
    gap: 20px;
}

.content-row section {
    flex: 1;
}

What this does

display: flex; places the sections in a row.

gap: 20px; creates space between the columns.

flex: 1; makes the sections share the available space equally.

Because the first row has two sections, it becomes two columns. Because the second row has three sections, it becomes three columns.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.
Step 15

Step 15 Add different colours to each row

Use the row classes to make each row visually different.

CSS to add

.row-one section {
    background-color: #e8f0ff;
    border-color: #2362c9;
}

.row-two section {
    background-color: #e6f8f1;
    border-color: #0aa873;
}

What this does

.row-one section targets only the sections inside the first row.

.row-two section targets only the sections inside the second row.

This is useful when different page rows need different visual styles.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.
Step 16

Step 16 Make the layout responsive

Add a media query so the columns stack on narrow screens.

CSS to add

@media (max-width: 700px) {
    .content-row {
        flex-direction: column;
    }
}

What this does

On smaller screens, each row changes from columns into a vertical stack.

This stops the sections becoming too narrow on phones and tablets.

Expected output

Community Website

Latest News

Use this section for important updates.

Upcoming Events

Use this section for dates and activities.

Clubs

Use this section for weekly clubs.

Volunteers

Use this section for volunteer information.

Contact

Use this section for contact details.

Footer information goes here.

Final code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main Layout Practice</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>Community Website</h1>
    </header>

    <main>
        <div class="content-row row-one">
            <section>
                <h2>Latest News</h2>
                <p>Use this section for important updates.</p>
            </section>

            <section>
                <h2>Upcoming Events</h2>
                <p>Use this section for dates and activities.</p>
            </section>
        </div>

        <div class="content-row row-two">
            <section>
                <h2>Clubs</h2>
                <p>Use this section for weekly clubs.</p>
            </section>

            <section>
                <h2>Volunteers</h2>
                <p>Use this section for volunteer information.</p>
            </section>

            <section>
                <h2>Contact</h2>
                <p>Use this section for contact details.</p>
            </section>
        </div>
    </main>

    <footer>
        <p>Footer information goes here.</p>
    </footer>
</body>
</html>

style.css

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #eef3f8;
    color: #222222;
}

header,
footer {
    background-color: #143d67;
    color: white;
    text-align: center;
    padding: 24px;
}

header h1,
footer p {
    margin: 0;
}

main {
    max-width: 1100px;
    margin: 30px auto;
    padding: 24px;
    background-color: white;
    border-radius: 12px;
}

.content-row {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    padding: 16px;
    border-width: 3px;
    border-style: dashed;
    border-color: #8aa4c2;
    border-radius: 12px;
}

.content-row:last-child {
    margin-bottom: 0;
}

section {
    padding: 22px;
    border-width: 3px;
    border-style: solid;
    border-color: #2362c9;
    border-radius: 10px;
    background-color: #e8f0ff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

section h2 {
    margin-top: 0;
}

.content-row section {
    flex: 1;
}

.row-one section {
    background-color: #e8f0ff;
    border-color: #2362c9;
}

.row-two section {
    background-color: #e6f8f1;
    border-color: #0aa873;
}

@media (max-width: 700px) {
    .content-row {
        flex-direction: column;
    }
}
Back to top