Web Development Lesson 5 - Layout
- Forced Positioning

Web Development Lesson 5 - Layout

Forced Positioning

Objective

This activity introduces some predefined HTML tags for structuring pages and looks at using 'position' to force your page into a particular layout.

Setup

Create a new file called 'layout.html' in your personal directory.
In 'layout.html', set up the basic HTML code with a link to 'style'css'.

Predefined Layout Tags

HTML includes some predefined tags to help you layout your document. Add this code to the <body> of your 'layout.html' file.

    <header>Header</header>
    <nav>Navigation</nav>
    <main>Main</main>
    <footer>Footer</footer>

Before we look too hard at these tags, let's add some CSS so you can see what their default layout looks like. Add the following code to your 'style.css' file.

header {
  background-color:indianred;
  border:darkred solid 2px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
}

main {
  background-color: lightgreen;
  border: darkgreen solid 2px;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
}

Now open 'layout.html' in Live Server and see how it looks. The colors and borders are purely there for your understanding of how the pieces fit on the screen. Usually they will have similar backgrounds.
All four elements fill the screen from left to right, wrapping their content tightly at left, top and bottom and they are stacked on top of each other in the order we've placed them.
You could use these for any content you like, but of course it's easier for you and anyone you might work with to follow if you use them as named.
<header> is usually for the banner at the top of the screen showing the site logo and name.
<nav> is usually used for site navigation below the banner or to the side of the main content.
<main> is where you'd add your page content.
<footer> is for anything you'd like at the bottom of the page, and often includes contact links, information about the organisation and even the page designer and copyright information.

Relative Positioning

Add the following CSS code to your 'nav' element.

  position: relative;
  top: 50px;

See how the <nav> element is now lower down than it previously was? It's top is now positioned relative to the previous element. In fact, the top is 50 pixels below the bottom of the previous element.
Also notice that the <nav> element is covering the <footer> element. That's because all elements other than <nav> are positioned 'statically' by default. They stay where they were put before CSS was applied. If you choose to change positioning, it's usually better to use the same for all elements.

Absolute Positioning

Now try the following code for your <main> element.

  position: absolute;

The <main> element has not changed position, but it has now been taken out of the flow of the document as far as the other elements are concerned.
It is now also wrapping the content on all sides rather than taking up the full width of the page. We can now control the positioning absolutely.

main {
  background-color: lightgreen;
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  bottom: 80px;
  left: 16%;
  right: 0px;
}

Now the <main> section is positioned exactly as we've prescribed - 100 pixels from the top, 80 pixels from the bottom, 16% of the screen width from the left and right at the right-hand border.
Let's position the header, nav and footer the same way.

header {
  background-color:indianred;
  border:darkred solid 2px;
  height: 100px;
  position: absolute;
  left: 16%;
  right: 0px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 15%;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
  position: absolute;
  bottom: 0px;
  height: 80px;
  left: 16%;
  right: 0px;
}

That looks pretty good for an old-fashioned layout.

Fixed Positioning

Let's add some content to the <main> section.

    <main>
        <div class="content">Section 1</div>
        <div class="content">Section 2</div>
        <div class="content">Section 3</div>
    </main>

Now let's make it look like it contains a lot of information. Add the following to your CSS code.

.content {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
}

Notice that the <nav> moves up the screen as we scroll the page to see the bottom of <main>
We can keep the <nav> in the same position by fixing it.

nav {
  background-color: burlywood;
  border:yellow solid 2px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 15%;
}

Try scrolling the screen and see how the <nav> stays in place while the <footer> moves as you scroll.
This could be used to keep the menu available, but clearly the <footer> is a problem.
Let's restore <main> so that our layout remains usable.

main {
  background-color: lightgreen;
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
}

Overflow

There's another way of dealing with large pages if you want to have a footer that's always visible.
Scroll the page and see that our orange Content section overflows <main> and goes beyond <footer>. If that doesn't happen because your screen is too big, increase the value of height in CSS.
When you're ready, let's add a scroll bar to <main>.

  overflow: scroll;

Now look at how the Content section behaves when you scroll.
Feel free to play around with the position type and numbers until you're comfortable that you understand how it works. Don't worry about losing track of your code. It will be available at the beginning of the next activity.

Next: Padding and Margins

Table of Contents

Web Development Lesson 5 - Layout

Forced Positioning

Objective

Setup

Predefined Layout Tags

Relative Positioning

Absolute Positioning

Fixed Positioning

Overflow