Broad Network


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

The normal way to layout a web page is to use frames and the frameset. 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. You need basic knowledge in HTML and CSS to understand this article.

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>

Notice that the content in the article element has not wrapped to the bottom of that of the nav element.

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 Text
Advantages 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
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design
Producing a Pure Perl Library

Comments

Become the Writer's Fan
Send the Writer a Message