CSS3 Major Layouts with Sectioning Elements

Mastering CSS3 – Part 5

Forward: In this part of the series, we see how to achieve major web page layouts using the new html sectioning elements.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 5 of my series, Mastering CSS3. In this part of the series, we see how to achieve major web page layouts using the new html sectioning elements. I assume you have read the previous parts of the series before reaching here; this is a continuation. html sectioning elements are the article, section, header, footer, nav and aside elements.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

What is really a Layout?
Layout means where you place what. That is, where you place what html element in a web page. Layout can be divided into two categories: major layout and minor layout. Major layout deals with partitioning of the web page. With sectioning elements, each partition takes a sectioning element. So major layout with sectioning, deals with where you place which sectioning element. Minor layout deals with where you place which small (e.g. image or paragraph) html element in a partition.

Should you use Sectioning Elements for Layout?
The official element to use to partition a web page is the frameset element (and their frames). However, search engine authors discourage website designers from using framesets in web page design. They say search engines do not work well with frameset pages. A search engine is a software application in the Internet, own by a company that promotes websites. So you have to learn alternative ways to partition the web page. This tutorial gives you one approach of partitioning a web page.

Strategy
The sectioning elements are block level elements. However, we shall float the nav (navigation) element to the left and use it as a sidebar and then float the aside element to the right and use it as an asidebar. If the nav or aside element is shorter than the main element, then the content of the main element will flow and go under the nav or aside element. You may not want this. To solve this problem, just add <br> elements into the nav or aside element at the bottom, to make it longer. You add as many line break elements as necessary to neutralize the effect.

With the layouts in this tutorial there is the normal vertical scrollbar for the body element. As you scroll down, all the sectioning elements and their contents move upward.

The heights of the sectioning elements will not be given, they will be determined by their contents.

The code samples in this section work only with new browsers. In order to make the code samples work with many browsers, the <br> element has been use to force some sectioning elements to the next line.

The Major Layouts
I give you the description and code for major layouts with sectioning elements below. The main thing you will have to do is just to fit in small html elements into the sectioning elements and you would have a web page to use in a web site. You should try all the code samples below. Borders have been given for all the sectioning elements, as “1px solid blue”. For now the borders are just to make you have confidence that the code samples are OK. In your commercial code, you should remove them by just erasing all the occurrences of “1px solid blue” in the code.

Before you try each code sample, you should read it first to know what is going on.

Header, Sidebar and Content Layout
This is the most popular layout. It has a header (banner) sectioning element that runs across the top of the web page. It has a narrow vertical sectioning element that runs downward below the header on the left. The sectioning element for the main content is big and is below the header and just on the right of the narrow vertical sectioning element. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

<header style="border:1px solid blue">
Header
</header><br>
    <nav style="display:inline;float:left; width:25%; border:1px solid blue">
        Sidebar with zero or more line break elements
    </nav>
    <article style="border:1px solid blue">
        Main Content
    </article>

</body>
</html>

Do not forget to remove my borders and possibly replace them with your own borders in all the code samples in this tutorial. You may also have to add <br> elements into the nav and aside elements at the bottom, to prevent the content of the main element (article) from flowing and wrapping under them. Note also that the <br> element has been used just after the end tag of the header element to force the other sectioning elements to go below the header.

Header, Sidebar, Content and Asidebar Layout
Today, there are computer screens that are too wide. This layout has an aside bar. The asidebar is on the opposite end (extreme right) of the sidebar. This layout is suitable for screens that are too wide. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <header style="border:1px solid blue">
        Header
    </header><br>
    <nav style="display:inline;float:left; width:20%; border:1px solid blue">
        Sidebar with zero or more line break elements
    </nav>
    <aside style="display:inline; float:right; width:20%; border:1px solid blue">
        Asidebar with zero or more line break elements.
    </aside>
    <article style="border:1px solid blue">
        Main Content
    </article>

</body>
</html>

Sidebar and Content Layout
This layout is the same as the first one above but without the header. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <nav style="display:inline;float:left; width:25%; border:1px solid blue">
        Sidebar with zero or more line break elements
    </nav>
    <article style="border:1px solid blue">
        Main Content
    </article>

</body>
</html>

Header and Content Layout
This layout is the same as the first one above but without the sidebar. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <header style="border:1px solid blue">
        Header
    </header><br>
    <article style="border:1px solid blue">
        Main Content
    </article>

</body>
</html>

Content and Footer Layout
With this layout, you have the main content section and then a small horizontal footer section below the main content section. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <article style="border:1px solid blue">
        Main Content
    </article><br>
    <footer style="border:1px solid blue">
        Footer
    </footer>

</body>
</html>

Header, Sidebar, Content and Footer Layout
In this layout, you have a header section (banner) that runs across the top of the web page. Below this section you have a long narrow vertical section on the left side of the web page for the sidebar. On the right of this narrow section you have the big section for the main content. Below the sidebar and content sections you have the footer section that stretches right across the web page. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <header style="border:1px solid blue">
        Header
    </header><br>
    <nav style="display:inline;float:left; width:25%; border:1px solid blue">
        Sidebar with zero or more line break elements
    </nav>
    <article style="border:1px solid blue">
        Main Content <br><br><br>
    </article>
    <footer style="border:1px solid blue">
        Footer
    </footer>

</body>
</html>

I was forced to add the <br> elements at the bottom of the main content section (article) in order to have the footer element go all across the bottom.

Header, Sidebar, Content, Asidebar and Footer Layout
The layout is the same as the one above but with an asidebar. It would be good for the new computer screens that are too wide. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

<header style="border:1px solid blue">
Header
</header><br>
    <nav style="display:inline;float:left; width:20%; border:1px solid blue">
        Sidebar with zero or more line break elements
    </nav>
    <aside style="display:inline; float:right; width:20%; border:1px solid blue">
        Asidebar with zero or more line break elements.
    </aside>
    <article style="border:1px solid blue">
        Main Content <br><br><br>
    </article>
    <footer style="border:1px solid blue">
        Footer
    </footer>

</body>
</html>

Nested Hierarchy
This layout is similar to the “Banner, Sidebar and Content Layout”. However, here, the sidebar goes right up to the top of the web page. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <nav style="display:inline;float:left; width:25%; border:1px solid blue">
        Sidebar with zero or more line break elements
    </nav>
    <article style="border:1px solid blue">
        <header style="border:1px solid blue">
            Header
        </header><br>
        Main Content
    </article>

</body>
</html>

Top-Down Hierarchy Layout
With this layout, you have a small narrow header horizontal section at the top of the web page that runs from the left end of the page to the right end. Below this, you have another horizontal section slightly taller than the first and it also runs from the left end of the page to the right end. You can call this the banner section. Banner and header mean more or less the same thing here. I have decided to use the word banner, here, to mean a bigger header. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <header style="border:1px solid blue">
        Header
    </header><br>
    <section style="border:1px solid blue">
        Banner
    </section><br>
    <article style="border:1px solid blue">
        Main Content
    </article>

</body>
</html>

Horizontal Split Layout
This layout divides the web page into two equal horizontal sections, each running from the left end of the page to the right end. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <article style="border:1px solid blue">
        Top
    </article><br>
    <article style="border:1px solid blue">
        Bottom
    </article>

</body>
</html>

Vertical Split Layout
This layout divides the web page into two equal vertical sections, each running from the top end to the bottom end. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

    <article style="display:inline; float:left; width:49%; border:1px solid blue">
        Left
    </article>
    <article style="display:inline; float:right; width:49%; border:1px solid blue">
        Right
    </article>

</body>
</html>

Wow, we have seen a good number of major layouts. What we have seen are the very important major layouts. Well, let us stop here and continue in the next part.

Chrys

Broad Network

CSS3 Major Layouts with Sectioning Elements

Mastering CSS3 – Part 5

Introduction

Related Links

Comments