CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

Types of layout

Fixed-width

html {
    background-color: white;
}
                
body {
    width: 960px;
    margin: 0 auto;
    background-color: green;
}

Liquid

html {
    background-color: white;
}
                
body {
    width: 80%;
    margin: 0 auto;
    background-color: green;
}

Running example of two-column layout

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>A simple document</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <header>
            Header
        </header>
        <nav>
            Nav
        </nav>
        <main>
            Main
        </main>
        <footer>
            Footer
        </footer>
    </body>
</html>
A two-column layout comprising a header across the top, then a nav and a main side-by-side, and a footer across the bottom.

HTML tables for multi-column layouts

<table>
    <tr><td colspan="2">Header</td></tr>
    <tr><td>Nav</td><td>Main</td></tr>
    <tr><td colspan="2">Footer</td></tr>
</table>

CSS floating

<p>
    Wombats are short-legged, muscular quadrupedal marsupials that are 
    native to Australia. <img src="wombat.jpg" alt="A cute wombat" />
    They are about 1 m (40 in) in length with small, stubby tails.
    …
</p>
img {
    float: left;
}

Wombats are short-legged, muscular quadrupedal marsupials that are native to Australia. A cute wombat They are about 1 m (40 in) in length with small, stubby tails. There are three extant species and they are all members of the family Vombatidae. They are adaptable and habitat tolerant, and are found in forested, mountainous, and heathland areas of south-eastern Australia, including Tasmania, as well as an isolated patch of about 300 ha (740 acres) in Epping Forest National Park in central Queensland. (From Wikipedia)

CSS floating for layout

CSS positioning

CSS positioning for layout

CSS Flexbox

Flexbox for an image gallery

<section>
    <img src="image001.jpg" alt="…" />
    <img src="image002.jpg" alt="…" />
    <img src="image003.jpg" alt="…" />
    <img src="image004.jpg" alt="…" />
    …
</section>
section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

Flexbox for a two-column layout

body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

header, footer {
    flex-basis: 100%;
}

nav {
    flex-grow: 1;
}

main { 
    flex-grow: 3;
}

However, Flexbox layout is most suited to simple layouts — use Grid layout for more complex layouts

CSS Grid Layout

Grid layout for a two-column layout

body {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: auto;
    grid-template-areas: "top top"
                         "middle-left middle-right"
                         "bottom bottom"
}

header {
    grid-area: top;
}

nav {
    grid-area: middle-left;
}

main {
    grid-area: middle-right;
}

footer {
    grid-area: bottom;
}