CSS Tutorial

CSS Website Layout

Last modified on: October 25, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">CSS Website Layout: Structuring Web Pages with CSS</h2>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="606476bc-49b7-4f01-9db9-dd4ab45f51d6" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>CSS allows for flexible, responsive layouts essential for creating structured, visually appealing web pages. Using CSS, you can arrange content in rows and columns, define sections, and ensure adaptability across various screen sizes.</p>
<hr />
<h3>CSS Layout Techniques</h3>
<p>CSS provides several methods for creating layouts, including:</p>
<ol>
<li><strong>CSS Flexbox</strong>: Ideal for single-dimensional layouts (rows or columns).</li>
<li><strong>CSS Grid</strong>: A powerful tool for two-dimensional layouts (both rows and columns).</li>
<li><strong>CSS Positioning</strong>: Used to position elements absolutely, relatively, or fixed on the page.</li>
</ol>
<h3>Basic Layout Structure</h3>
<p>A standard website layout includes a <strong>header</strong>, <strong>navigation bar</strong>, <strong>main content area</strong>, <strong>sidebar</strong>, and <strong>footer</strong>.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Website Layout&lt;/title&gt;
    &lt;style&gt;
        /* Basic Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

/* Overall layout */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }

/* Header styling */
        header {
            background-color: #333;
            color: white;
            padding: 1em;
            text-align: center;
        }

/* Navigation bar */
        nav {
            display: flex;
            justify-content: center;
            background-color: #444;
        }

nav a {
            color: white;
            padding: 1em;
            text-decoration: none;
        }

nav a:hover {
            background-color: #555;
        }

/* Layout for main and sidebar */
        .container {
            display: flex;
            margin: 1em;
        }

/* Main content area */
        .main {
            flex: 2;
            padding: 1em;
        }

/* Sidebar */
        .sidebar {
            flex: 1;
            padding: 1em;
            background-color: #f4f4f4;
        }

/* Footer */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em;
            position: relative;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- Header --&gt;
    &lt;header&gt;
        &lt;h1&gt;My Website&lt;/h1&gt;
        &lt;p&gt;A responsive website layout using CSS&lt;/p&gt;
    &lt;/header&gt;

&lt;!-- Navigation Bar --&gt;
    &lt;nav&gt;
        &lt;a href="#"&gt;Home&lt;/a&gt;
        &lt;a href="#"&gt;About&lt;/a&gt;
        &lt;a href="#"&gt;Services&lt;/a&gt;
        &lt;a href="#"&gt;Contact&lt;/a&gt;
    &lt;/nav&gt;

&lt;!-- Main Content and Sidebar Layout --&gt;
    &lt;div class="container"&gt;
        &lt;div class="main"&gt;
            &lt;h2&gt;Main Content Area&lt;/h2&gt;
            &lt;p&gt;This is the main content of the page, where articles, blog posts, or other text content are displayed.&lt;/p&gt;
        &lt;/div&gt;
        &lt;aside class="sidebar"&gt;
            &lt;h3&gt;Sidebar&lt;/h3&gt;
            &lt;p&gt;Additional links, news, or advertisements can go here.&lt;/p&gt;
        &lt;/aside&gt;
    &lt;/div&gt;

&lt;!-- Footer --&gt;
    &lt;footer&gt;
        &lt;p&gt;&amp;copy; 2024 My Website&lt;/p&gt;
    &lt;/footer&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of Layout Structure</h3>
<ol>
<li><strong>Header</strong>: Contains the site title and tagline, styled with a dark background and white text.</li>
<li><strong>Navigation Bar</strong>: Positioned horizontally with flexbox for centered links, each link has padding and a hover effect.</li>
<li><strong>Main Content Area</strong>: Occupies two-thirds of the width in the <code>.container</code> flexbox layout.</li>
<li><strong>Sidebar</strong>: Positioned alongside the main content, taking up one-third of the width.</li>
<li><strong>Footer</strong>: Spans the entire width at the bottom of the page with text centered.</li>
</ol>
<hr />
<h3>Advanced Layout with CSS Grid</h3>
<p>CSS Grid allows for more complex, two-dimensional layouts, providing precise control over row and column sizes.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Advanced CSS Grid Layout&lt;/title&gt;
    &lt;style&gt;
        /* Basic reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

/* Grid container */
        .grid-container {
            display: grid;
            grid-template-areas:
                "header header header"
                "nav main sidebar"
                "footer footer footer";
            grid-template-columns: 1fr 3fr 1fr;
            grid-template-rows: auto 1fr auto;
            min-height: 100vh;
        }

/* Grid areas */
        header {
            grid-area: header;
            background-color: #333;
            color: white;
            padding: 1em;
            text-align: center;
        }

nav {
            grid-area: nav;
            background-color: #444;
            padding: 1em;
            color: white;
        }

.main {
            grid-area: main;
            padding: 1em;
        }

.sidebar {
            grid-area: sidebar;
            background-color: #f4f4f4;
            padding: 1em;
        }

footer {
            grid-area: footer;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="grid-container"&gt;
        &lt;header&gt;
            &lt;h1&gt;My Website&lt;/h1&gt;
        &lt;/header&gt;
        &lt;nav&gt;
            &lt;p&gt;Navigation links&lt;/p&gt;
        &lt;/nav&gt;
        &lt;div class="main"&gt;
            &lt;h2&gt;Main Content&lt;/h2&gt;
            &lt;p&gt;This section holds the main content of the webpage.&lt;/p&gt;
        &lt;/div&gt;
        &lt;aside class="sidebar"&gt;
            &lt;h3&gt;Sidebar&lt;/h3&gt;
            &lt;p&gt;Additional resources or links can be placed here.&lt;/p&gt;
        &lt;/aside&gt;
        &lt;footer&gt;
            &lt;p&gt;&amp;copy; 2024 My Website&lt;/p&gt;
        &lt;/footer&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation</h3>
<ul>
<li><strong>Grid Layout</strong>: The <code>grid-template-areas</code> property defines areas for <code>header</code>, <code>nav</code>, <code>main</code>, <code>sidebar</code>, and <code>footer</code>. Each element is placed accordingly in these grid areas.</li>
<li><strong>Flexible Columns and Rows</strong>: <code>grid-template-columns</code> and <code>grid-template-rows</code> define the width of columns and height of rows. <code>1fr</code> represents fractional units of the available space.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More