Layout Without Frames for the Web Page
Partitioning a Web Page Without Frames
Foreword: In this article, I show you how to partition a web page without frames and the frameset, ending up with no partition wrapping below another.
By: Chrysanthus Date Published: 10 Dec 2015
Introduction
Technique
You layout the page using sectioning content elements. You give sectioning content elements width values, and you float some. The sectioning content elements are given width values, such that the elements have space for padding, border and margin. Those are the main points.
Illustration
The following code is an example for a layout that has a Header, Navigation Bar, Main Content, Sidebar and Footer. It is for a 1024 X 768 pixel screen. The nav and article sectioning content elements are independent of one another and have been floated left. The aside sectioning content element is inside the article element and has been floated to the right.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<header>
</header>
<main>
<h1></h1>
<nav style="float:left; width:244px">
</nav>
<article style="float:left; width:740px">
<aside style="float:right; width:244px">
</aside>
</article>
</main>
<footer>
</footer>
</body>
</html>
Try the following example, which is the same as the above but with some content:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<header>
Preamble and some Links
</header>
<main>
<h1>Heading</h1>
<nav style="float:left; width:244px">
<p>links</p>
</nav>
<article style="float:left; width:740px">
<aside style="float:right; width:244px">
<p>aside info and links</p>
</aside>
<p>main content</p>
<br><br><br><br><br><br><br><br><br>more main content . . .
</article>
</main>
<footer>
Copyright 2016
</footer>
</body>
</html>
The following code is the same as the above but with borders (try it):
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<header style="border:solid 2px black">
Preamble and some Links
</header>
<main>
<h1>Heading</h1>
<nav style="float:left; width:244px; border:solid 2px black">
<p>links</p>
</nav>
<article style="float:left; width:740px; border:solid 2px black">
<aside style="float:right; width:244px; border:solid 2px black">
<p>aside info and links</p>
</aside>
<p>main content</p>
<br><br><br><br><br><br><br><br><br>more main content . . .
</article>
</main>
<footer style="border:solid 2px black">
Copyright 2016
</footer>
</body>
</html>
I tried the code in my browser, but the main element did not respond well.
As you can see, the blocks of the sectioning content elements have been maintained and no content has wrapped below another unintentionally.
For responsive design, you will have to use relative units for the widths – see later.
That is it.
Chrys
Related Links
Surrounding a Web Page Image with TextAdvantages and Disadvantages of HTML Table for Layout
Layout Without Frames for the Web Page
Designing Iconic Hyperlink for a Web Page
A Suitable RWD Layout for Smartphones and Desktop
Knowing the Resolutions of Visitor Screens with ECMAScript
Enlarge and Reduce HTML Image with ECMAScript
HTML5 Image Gallery and Image Enlargement with ECMAScript
Designing a Video Gallery
Ajax Web Technology Explained
Perl Course
MySQL Course
Using the PurePerl MySQL API
Drawing Bar Chart in HTML Canvas
Drawing Pie Chart in HTML Canvas
HTML Canvas 2D Context
Drawing a Histogram in HTML Canvas
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design
Producing a Pure Perl Library