Scrollable Web Page of Major Layout with DIV Elements in CSS3
Mastering CSS3 – Part 4
Forward: In this part of the series, we look at Scrollable Web Page of Major Layout with DIV Elements.
By: Chrysanthus Date Published: 25 Jul 2012
Introduction
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 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 DIVs, each partition takes a div element. So major layout with DIVs deals with where you place which div element. Minor layout deals with where you place which small (e.g. image or paragraph) html element in a partition.
Should you use DIV 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
By default a div element would start from the left edge of its containing (body) element to the right edge of its containing element. If we want more than one div element in a line, we have to convert some into inline elements and then float. If we want a div element to extend from the left edge of the containing element to the right edge, we have to allow it in its default state.
If the floated div element is shorter than the main element, then the content of the main element will flow and go under the div element. You may not want this. To solve this problem, just add <br> elements into the floated div 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 div elements and their contents move upward. This situation is different from that in the previous two tutorials where each partition can have its own scrollbars. Here, the partitions, in principle, do not have scrollbars.
There are five tutorials in this series with five different layout approaches. The approach in this tutorial is the most convenient for browsers, today.
I give you the description and code for major layouts with div elements below. The main thing you will have to do is just to fit in small html elements into the div 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 div 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.
The heights of the div elements will not be given, they will be determined by their contents.
The width of some div elements are given slightly smaller than expected; In this way they will work with all browser.
Before you try each code sample, read it first to know what is going on.
Banner, Sidebar and Content Layout
This is the most popular layout. It has a header (banner) div element that runs across the top of the web page. It has a narrow vertical div that runs downward below the header on the left. The div for the main content is big and is below the header and just on the right of the narrow vertical div. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>Major layout with Fixed DIVs</title>
</head>
<body>
<div style=" border:1px solid blue">
The Banner
</div>
<div style="display:inline; float:left; width:24%; border:1px solid blue">
The Sidebar
</div>
<div style="display:inline; float:right; width:74%; border:1px solid blue">
Main Content
</div>
</body>
</html>
With this code, the main div element is a floated element, so its content will not wrap and flow under the adjacent floated element. You do not need to add any <br> elements at the bottom of the adjacent floated element, for this code. You really need to add the <br> elements at the bottom of an adjacent floated div element if the main div element is allowed at its block display default state. This same rule is applicable to sectioning elements (see – next chapter).
Do not forget to remove my borders and possibly replace them with your own borders in all the code samples in this tutorial.
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>Major layout with Fixed DIVs</title>
</head>
<body>
<div style=" border:1px solid blue">
The Banner
</div>
<div style="display:inline; float:left; width:19%; border:1px solid blue">
The Sidebar
</div>
<div style="float:left; border:1px solid blue">
Main Content
</div>
<div style="display:inline; float:right; width:19%; border:1px solid blue">
The Asidebar
</div>
</body>
</html>
Sidebar 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>Major layout with Fixed DIVs</title>
</head>
<body>
<div style="display:inline; float:left; width:24%; border:1px solid blue">
The Sidebar
</div>
<div style="display:inline; float:right; width:74%; border:1px solid blue">
Main Content
</div>
</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>Major layout with Fixed DIVs</title>
</head>
<body>
<div style="border:1px solid blue">
The Banner
</div>
<div style=" border:1px solid blue">
Main Content
</div>
</body>
</html>
With this layout, you have the main content div and then a small horizontal footer div below the main content div. This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Major layout with Fixed DIVs</title>
</head>
<body>
<div style="border:1px solid blue">
Main Content
</div>
<div style=" border:1px solid blue">
The Footer
</div>
</body>
</html>
Header, Sidebar, Content and Footer Layout
In this layout, you have a header div (banner) that runs across the top of the web page. Below this div you have a long narrow vertical div on the left side of the web page for the sidebar. On the right of this narrow div, you have the big div for the main content. Below the sidebar and content DIVs you have the footer div that stretches right across the web page. This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Web Page Layout Template</title>
</head>
<body>
<div style="border:1px solid blue">
The Banner
</div>
<div style="display:inline;float:left; width:24%; border:1px solid blue">
The Sidebar
</div>
<div style="border:1px solid blue">
Main Content
</div>
<div style="border:1px solid blue">
The Footer
</div>
</body>
</html>
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>
<div style="border:1px solid blue">
The Banner
</div>
<div style="display:inline;float:left; width:24%; border:1px solid blue">
The Sidebar
</div>
<div style="display:inline;float:right; width:24%; border:1px solid blue">
The Asidebar
</div>
<div style="border:1px solid blue">
Main Content
</div>
<div style="border:1px solid blue">
The Footer
</div>
</body>
</html>
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>Major layout with Fixed DIVs</title>
</head>
<body>
<div style="display:inline; float:left; width:24%; border:1px solid blue">
The Sidebar
</div>
<div style="display:inline; float:right; width:74%; border:1px solid blue">
<div style="border:1px solid blue">
The Banner
</div>
<div style="border:1px solid blue">
Main Content
</div>
</div>
</body>
</html>
Top-Down Hierarchy Layout
With this layout, you have a small narrow header horizontal div 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 div 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 div. 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>Major layout with Fixed DIVs</title>
</head>
<body>
<div style="border:1px solid blue">
The Header
</div>
<div style="border:1px solid blue">
The Banner
</div>
<div style="border:1px solid blue">
Main Content
</div>
</body>
</html>
This layout divides the web page into two equal horizontal DIVs, each running from the left end of the page to the right end. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>Major layout with Fixed DIVs</title>
</head>
<body>
<div style="border:1px solid blue">
Top
</div>
<div style="border:1px solid blue">
Bottom
</div>
</body>
</html>
Vertical Split Layout
This layout divides the web page into two equal vertical DIVs, each running from the top end to the bottom end. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>Major layout with Fixed DIVs</title>
</head>
<body>
<div style="display:inline; float:left; width:49%; border:1px solid blue">
Left
</div>
<div style="display:inline; float:right; width:49%; border:1px solid blue">
Right
</div>
</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
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT