Major Layouts for Websites
Simple Guide to Website Design – Part 1
Foreword: In this part of the series, I talk about major layouts you can use in web design.
By: Chrysanthus Date Published: 27 Dec 2015
Introduction
Pre-knowledge
At the bottom of this page, you will find links to the different series you should have read before coming here, to better understand this one.
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. A minor layout goes inside a partition. In this tutorial, I talk about major layouts with HTML section elements.
Strategy
By default, a section element would start from the left content edge of its containing element and end at the right content edge of the containing element (body). If you want more than one section element in a line (fat line), you have to convert them into inline-block elements. You will also have to use the CSS property/value of “vertical-align:top” so that all content in a section begin from the top. If you want a section element to extend from the left edge of the containing element to the right edge, then allow it in its default (initial) state.
Major Layouts
I give you the description and code for major layouts with section elements below. The main thing you will have to do will be just to fit in small HTML elements into the section elements. You should try all the code samples below. Borders have been given for all the section 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”. You will also have to make adjustment to the widths in your commercial program. The layouts have been design with the resolution of 1024x768 in mind.
For the inline-block section elements, there must be sufficient space between the elements (for padding, border and margin), otherwise one may wrap down unnecessarily.
Banner, Navigation Bar and Content Layout
It has a banner, header element that runs across the top of the web page. It has a narrow vertical nav bar that runs downward below the header, on the left. The section element for the principal content is big and is below the header and just on the right of the narrow vertical nav; it is an article element. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<header style="border:1px solid blue">
The Banner
</header>
<nav style="display:inline-block; min-width:310px; vertical-align:top; border:1px solid
blue">
The Nav bar <br><br><br><br><br><br><br>
</nav>
<article style="display:inline-block; width:68%; vertical-align:top; border:1px solid
blue">
Principal Content <br><br><br><br><br><br><br><br><br>
</article>
</body>
</html>
Today, there are computer screens that are too wide. This layout has a sidebar. The sidebar is on the opposite end (extreme right) of the nav bar. The principal sectioning content element also has an asidebar floated right. This layout is suitable for screens that are too wide. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<header style="border:1px solid blue">
The Banner
</header>
<nav style="display:inline-block; min-width:220px; vertical-align:top; border:1px solid blue">
The Nav bar <br><br><br><br><br><br><br>
</nav>
<article style="display:inline-block; width:54%; vertical-align:top; border:1px solid blue">
<aside style="float:right; min-width:220px; vertical-align:top; border:1px solid blue">
The sidebar <br><br><br><br><br><br><br>
</aside>
Principal Content <br><br><br><br><br><br><br><br><br>
</article>
<aside style="display:inline-block; min-width:220px; vertical-align:top; border:1px solid blue">
The sidebar <br><br><br><br><br><br><br>
</aside>
</body>
</html>
Navigation Bar and Content Layout
This layout is the same as the first one above but without the banner. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<nav style="display:inline-block; min-width:310px; vertical-align:top; border:1px solid
blue">
The Nav bar <br><br><br><br><br><br><br>
</nav>
<article style="display:inline-block; width:68%; vertical-align:top; border:1px solid
blue">
Principal Content <br><br><br><br><br><br><br><br><br>
</article>
</body>
</html>
This layout is the same as the first one above but without the navigation bar. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<header style="border:1px solid blue">
The Banner
</header>
<article style="border:1px solid blue">
Principal Content <br><br><br><br><br><br><br><br><br>
</article>
</body>
</html>
Content and Footer Layout
With this layout, you have the principal content section and then a small horizontal footer below. This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<article style="border:1px solid blue">
Principal Content <br><br><br><br><br><br><br><br><br>
</article>
<footer style="border:1px solid blue">
The Footer
</footer>
</body>
</html>
Header, Sidebar, Content and Footer Layout
In this layout, you have a header that runs across the top of the web page. Below this you have a long narrow vertical bar on the right side of the web page, for the sidebar. Below the sidebar and principal content, you have the footer that stretches right across the web page. This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<header style="border:1px solid blue">
The Banner
</header>
<article style="display:inline-block; width:68%; vertical-align:top; border:1px solid blue">
Principal Content <br><br><br><br><br><br><br><br><br>
</article>
<aside style="display:inline-block; min-width:310px; vertical-align:top; border:1px solid blue">
The sidebar <br><br><br><br><br><br><br>
</aside>
<footer style="border:1px solid blue">
The Footer
</footer>
</body>
</html>
This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<header style="border:1px solid blue">
The Banner
</header>
<nav style="display:inline-block; min-width:220px; vertical-align:top; border:1px solid blue">
The Nav bar <br><br><br><br><br><br><br>
</nav>
<article style="display:inline-block; width:54%; vertical-align:top; border:1px solid blue">
Principal Content <br><br><br><br><br><br><br><br><br>
</article>
<aside style="display:inline-block; min-width:220px; vertical-align:top; border:1px solid blue">
The sidebar <br><br><br><br><br><br><br>
</aside>
<footer style="border:1px solid blue">
The Footer
</footer>
</body>
</html>
Vertical Split Layout
This layout divides the web page into two or more equal horizontal sections, each running from the top of the page to the bottom. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<article style="display:inline-block; width:32%; vertical-align:top; border:1px solid blue">
Left <br><br><br><br><br><br><br>
</article>
<article style="display:inline-block; width:32%; vertical-align:top; border:1px solid blue">
Middle <br><br><br><br><br><br><br><br><br>
</article>
<article style="display:inline-block; width:32%; vertical-align:top; border:1px solid blue">
Right <br><br><br><br><br><br><br>
</article>
</body>
</html>
For 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, which is taller than the first and it also runs from the left end of the page to the right end. Then you have the principal element (running from left to right). This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<header style="border:1px solid blue">
Smaller header <br><br>
</header>
<footer style="vertical-align:top; border:1px solid blue">
Bigger header, even though with footer element <br><br><br><br>
</footer>
<article style="vertical-align:top; border:1px solid blue">
principal <br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</body>
</html>
This layout is ideal for smartphones and good for desktops. If the site is to be used for both smartphones and desktops, then the minimum width of any element in it, should be less than the minimum width of the smartphone screens (a lot of element wrapping should also be used).
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
NEXT