CSS3 Major Layouts with DIV Element Fixed Positioning
Mastering CSS3 – Part 3
Forward: In this part of the series, we see how to achieve major web page layouts, using the div element and the CSS fixed position property.
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 and Fixed Positioning 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 body element of a web page is considered to be at z-index, zero. An element in front of another as seen by the user is said to be in a layer higher than the one behind it. Each layer has a z-index integer. The more the layer is toward the user, the higher the z-index value. Elements in the normal flow such as the paragraph element are considered to be at z-index, 1.
Any fixed position element should have a z-index. Each partition in the web page here is a div element. For simplicity all these div elements will be at z-index, 2. There will be no element in the body element. The only thing the body element can have is background color or background image; however, I will not address that in this tutorial. The body element will not have scrollbars as each div element can have its own scroll bars. To remove the scrollbars from the body element, type the following in the start tag of the body element:
style="overflow:hidden"
To give a div element scrollbars, type the following in the start tag of the div element:
style="overflow:scroll"
We shall see more about the overflow property used to hide or bring in scrollbars for an element, later.
The placement of each of the div elements is determined based on the top-left corner of the element, relative to the client area (viewport) of the screen. The width and height are given as you would give any other element.
I give you the description and code for major layouts with div elements and the fixed position property 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. The div elements for the code samples below do not have scrollbars. I will address the issue of scrollbars proper, in a later tutorial. Borders have been given for all the fixed 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.
Note: When an element such as the div element has the fixed position property, the element cannot grow more than the dimensions (width and height that you have given to the element) and it position on the screen client area (viewport) cannot change. In this way, the div elements act like the frame elements.
Before you try each code sample below, you should 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) fixed div element that runs across the top of the web page. It has a narrow vertical fixed 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 style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:100%; height:25%; z-index:2;border:1px solid blue">
The Banner
</div>
<div style="position:fixed; left:0%; top:25%; width:25%; height:75%; z-index:2;border:1px solid blue">
The Sidebar
</div>
<div style="position:fixed; left:25%; top:25%; width:75%; height:75%; z-index:2;border:1px solid blue">
Main Content
</div>
</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.
Banner, 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>Major layout with Fixed DIVs</title>
</head>
<body style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:100%; height:25%; z-index:2;border:1px solid blue">
The Banner
</div>
<div style="position:fixed; left:0%; top:25%; width:20%; height:75%; z-index:2;border:1px solid blue">
The Sidebar
</div>
<div style="position:fixed; left:20%; top:25%; width:60%; height:75%; z-index:2;border:1px solid blue">
Main Content
</div>
<div style="position:fixed; left:80%; top:25%; width:20%; height:75%; z-index:2;border:1px solid blue">
The Asidebar
</div>
</body>
</html>
This layout is the same as the first one above but without the header. The code is:
<!DOCTYPE HTML>
<html>
<head>
<title>Major layout with Fixed DIVs</title>
</head>
<body style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:25%; height:100%; z-index:2;border:1px solid blue">
The Sidebar
</div>
<div style="position:fixed; left:25%; top:0%; width:75%; height:100%; z-index:2;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 style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:100%; height:25%; z-index:2;border:1px solid blue">
The Banner
</div>
<div style="position:fixed; left:0%; top:25%; width:100%; height:75%; z-index:2;border:1px solid blue">
Main Content
</div>
</body>
</html>
Content and Footer Layout
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 style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:100%; height:75%; z-index:2;border:1px solid blue">
Main Content
</div>
<div style="position:fixed; left:0%; top:75%; width:100%; height:25%; z-index:2;border:1px solid blue">
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 div you have the footer div that stretches right across the web page. This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Major layout with Fixed DIVs</title>
</head>
<body style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:100%; height:20%; z-index:2;border:1px solid blue">
The Banner
</div>
<div style="position:fixed; left:0%; top:20%; width:25%; height:65%; z-index:2;border:1px solid blue">
The Sidebar
</div>
<div style="position:fixed; left:25%; top:20%; width:75%; height:65%; z-index:2;border:1px solid blue">
Main Content
</div>
<div style="position:fixed; left:0%; top:85%; width:100%; height:15%; z-index:2;border:1px solid blue">
Footer
</div>
</body>
</html>
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>Major layout with Fixed DIVs</title>
</head>
<body style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:100%; height:20%; z-index:2;border:1px solid blue">
The Banner
</div>
<div style="position:fixed; left:0%; top:20%; width:20%; height:65%; z-index:2;border:1px solid blue">
The Sidebar
</div>
<div style="position:fixed; left:20%; top:20%; width:60%; height:65%; z-index:2;border:1px solid blue">
Main Content
</div>
<div style="position:fixed; left:80%; top:20%; width:20%; height:65%; z-index:2;border:1px solid blue">
The Asidebar
</div>
<div style="position:fixed; left:0%; top:85%; width:100%; height:15%; z-index:2;border:1px solid blue">
Footer
</div>
</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>Major layout with Fixed DIVs</title>
</head>
<body style="overflow:hidden">
<div style="position:fixed; left:25%; top:0%; width:75%; height:25%; z-index:2;border:1px solid blue">
The Banner
</div>
<div style="position:fixed; left:0%; top:0%; width:25%; height:100%; z-index:2;border:1px solid blue">
The Sidebar
</div>
<div style="position:fixed; left:25%; top:25%; width:75%; height:75%; z-index:2;border:1px solid blue">
Main Content
</div>
</body>
</html>
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 style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:100%; height:15%; z-index:2;border:1px solid blue">
The Header
</div>
<div style="position:fixed; left:0%; top:15%; width:100%; height:25%; z-index:2;border:1px solid blue">
The Banner
</div>
<div style="position:fixed; left:0%; top:40%; width:100%; height:60%; z-index:2;border:1px solid blue">
Main Content
</div>
</body>
</html>
Horizontal Split Layout
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 style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:100%; height:50%; z-index:2;border:1px solid blue">
Top
</div>
<div style="position:fixed; left:0%; top:50%; width:100%; height:50%; z-index:2;border:1px solid blue">
Down
</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 style="overflow:hidden">
<div style="position:fixed; left:0%; top:0%; width:50%; height:100%; z-index:2;border:1px solid blue">
Left
</div>
<div style="position:fixed; left:50%; top:0%; width:50%; height:100%; z-index:2;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