header 2000

4 Web Page Layout

In this chapter, we will introduce a very important and complex topic – namely options and methods for laying out the order of the various sections of your web pages. We will begin by going back in time to the days when all websites were laid out using tables with fixed widths. We will then describe how to use div tags to divide up your content into boxes and then use the float property to position your divides where you want them on your web page. This chapter is divided into the following four sections.

4.1 Web Page Layout Tips
4.2 Using Tables for Web Page Layout
4.3 Responsive Page Layout Problems
4.4 Responsive Page Layout Solutions

In Section 4.1, we cover the pluses and minuses of various layout options. Layout refers to how the images and text on your web pages are displayed.

In Section 4.2, we create a few simple tables to introduce the basic principles of static web page layout.

In Section 4.3, we explain the problems of using divides and floats to create a responsive page layout that adjusts for different screen widths.

In Section 4.4, we provide solutions to the above problems and the current best options for web page layouts.

4.0.01

Page Layout refers to how the articles and images are structured on your web page. Layouts typically refer to the number of rows and columns on the Home page – in particular to the number of columns in the main body of content on the Home page. The main body is the area where “Featured” articles are displayed.

Example of a three-column layout:

4.1.01

In the past, 3 column layouts – with side bar menus on both sides of the main content - were common. But three column layouts are very difficult to read. If the computer screen is 14 inches or 1400 pixels wide, and you are doing side by side editing, then each window is only 7 inches wide. After subtracting 1 inch for margins, each window is only 6 inches wide. Thus, each column in each window when viewing a 3 column layout is only 2 inches wide.

Benefit of a Single Column Layout

If you really want to convey information, you are better off with a one column layout with all the menu items at the top of the HOME page. This is how most books are written. At most, you should have two columns on your home page with a single side menu.

Example of a one column home page layout

4.1.02

From the top down, it has a header, a main menu, a slide show and three modules in the Featured position above the main body. It is called a single column layout because there is only one column for the main body content. Note that just because you should use a single column layout for the main content area, this does not mean that all of the sections of your home page should be a single column. It is quite common to have “feature boxes” at the top and bottom of your HOME page to highlight particular sections of your website.

Two and Three Column Layouts have Empty Space

One of the problems with the layout of articles on three column layouts is that there is a bunch of empty space below the featured articles because the content in the three columns do not take up the same amount of vertical space. In addition to not looking very good, this is not a very effective way to communicate information.

In this section, we will introduce a very important and complex topic – namely options and methods for laying out the order of the various sections of your web pages. We will begin by going back in time to the days when all websites were laid out using tables with fixed widths. We do this not because we want you to use fixed width tables but rather because this is the easiest way to learn the basics of web page layouts. We will then describe how to use div tags to divide up your content into boxes and then use the float property to position your divides where you want them on your web page. We do this not because we expect you to use Divides and Floats to layout your real web pages – but rather because it is important to understand how responsive design is achieved on a modern web page. So think of this chapter as merely the first step in a long process.

In our next book, we will explain how to use a Joomla Framework called Sparky to layout the content for an interactive website. In the course after that, we will explain how to layout the boxes and categories for a news website. Then in a later course, we will explain how to layout content for an online store. But all of that is in the future. For now, let’s begin by building our first simple layout with a simple table.

Common tags used in an HTML Table Layout

The good news is that there are only a few tags used to create HTML Table Layout. The HTML, HEAD and BODY TAGS are used only once at or near the start of your HTML document. While we will use the DIVIDE tag several times with a responsive layout, with a table layout, we will use it only once – to insert or Wrapper Selector.

The remaining three structural tags, TABLE, TABLE ROW (TR) and TABLE DATA CELL (TD) are used repeatedly to create the structure of your web page.

Then in the cells is where we will use our content tags which include the Heading tags and the Paragraph tag.

Here is a table describing the purpose of each tag.

Tag

Description

<html>

Begins an html document.

<head>

The head is right after the HTML tag and begins the head or invisible part of the document

<body>

The body tag is right after the head of the document and begins the part of the html document visible in the viewer’s browser screen

<div>

The divide tag is used to define the wrapper which is a type of container that holds all of the other elements in the page. The wrapper is different from the body in that the body is the full width of the viewer screen and the wrapper is narrower and often a fixed width centered in the viewer screen.

<table>

Begins a table inside the body of a document OR inside of an existing table.

<tr>

Begins a table row inside of an existing table

<td>

Begins a table cell inside of an existing table row

<h1>, <h2>

Heading tags used to style the headings of various sections of a document.

<p>

Paragraph tag used to contain and style the paragraphs of a document. Often paragraph tags come with a class=”” attribute to define the CSS in a style sheet or a style=”” attribute to define the CSS directly in the document HTML.

HTML, HEAD AND BODY TAGS

HTML stands for Hyperlink, Text Markup Language. All HTML tags come in pairs. One tag opens the document and the other closes it.

<html></html>.

Nested inside of these HTML tags are head and body opening and closing tags:

<html><head></head><body></body></html>.

The head section contains only hidden information about the web page, such as the Title, Author and Description used for Search Engines. Nothing in the head section is actually displayed. CSS may be put in the head of the document in a <style> tag (called an internal style sheet) or CSS can be put in a <link> tag in the head of a document (called an external style sheet). Or CSS can be put in a style= attribute directly in the body of the document. .

Body, Wrapper, Container, Outer Table or Single Table to Hold our Web Page Together?
We generally do not want to begin the page layout or styling with the body tag for the simple reason that the body is intended to run the full width of the screen. At most, it will contain a background color or image placed behind the fixed or flexible content of the page. This is why nearly all web pages use a divide tag to define a wrapper which is a CSS class that is styled to hold the rest of the content and all remaining elements inside of it. While this style can be set with a fixed width, such as 900 pixels, it is now more common to set the wrapper width with the max-width property and a maximum width of 960 pixels.

How Wide Should our Page Content Be? Why is 960px so popular?
We will assume that our viewer is using a 15 inch laptop with a high resolution 1920 by 1080 pixel screen and that the viewer will want to do side by side editing. This means that the working area for each screen or each web page document should be 1920 divided by 2 which is 960 pixels. 960px is also popular because it can be divided by 2, 3, 4, 6 and 12. We will also assume that the screen is 960 pixels high just because that will make the math easier for determining the height and width of various cells in our layout.

Should the Wrapper be Defined with a Class or ID?
It is common for the wrapper to be defined in an index.html document as an ID. Here is the HTML if the wrapper is defined as an ID:

<html> <head></head> <body>     <div id="wrapper"> <h1>Title of the document. </h1> <p>Paragraph inside a div centered in the page with a maximum width of 600px.</p>     </div> </body> </html>

Here is the CSS if the wrapper is defined as an ID:

In the last section, we used tables and data cells to layout the different areas of our web page. In this section, we will create a more responsive layout by replacing the table and data cell tags with divide tags. The <div> tag is used as a box for other elements including headings and paragraphs. Because divides can float on a page, they are more responsive for various screen widths than tables. There are two different methods for creating layouts with divides. The old way is to use the float property. The newer better way is to use inline blocks.

The Good, the Bad and the Ugly about Floating Elements
The simple truth is that the float property was never really designed for page layout. It was originally designed to allow text to flow around images by floating images to the left or right of the text. So we should really think of the float property to be like the Wrap Left and Wrap Right Image properties in Libre Writer. Wrap the text left and align the image right is the same as Float the image right.

4.3.01

rom the very beginning, the float property had problems. For example, if you want space around a floated image, you had to add the margins to the floated image element – not to the text next to the image! Why was this? Well, the float property takes the image out of the document flow. So the image ignores text formatting as if it did not even exist.

Then Steve Jobs came up with the idea of putting a computer inside of a phone… or was it a phone inside of a computer? Either way, folks wanted to start looking at web sites on phones with tiny screens. This of course was a terrible idea and one which I firmly opposed and said would never fly because it is extremely difficult to read text on very narrow screens. Don’t do it!

Despite me spending years telling people not to waste their hard earned money on computers with tiny screens, eventually everyone was using mobile phones (I refuse to call them smart because there is nothing smart about them). Anyway, this crazy phone revolution led to the need for responsive layouts. For a couple of years, we struggled on with using tables to layout web pages with the trick of using a normal table for our real page layout and then switching to a single column table for smaller screen sizes.

But this meant not only two CSS sheets, but two whole websites. Eventually, web designers stopped using tables for page layout. Then some bright mind came up with the idea of using the float property, not merely to move images around on the page, but to also move boxes of content around on the page. This insanity went on for about 10 years and was only recently replaced by inline blocks, Flex boxes and a series of other developments we will cover at the end of this section. But first, we will learn how to do some simple layouts with floats – not just to take a trip down memory lane - but to help you see why you do not want to use floats for page layouts.

Two Column Layout Using Divide Blocks and Floats
Here is what the divide structure for our floating layout will look like:

4.3.02

Recall from the end of the last section, that when we changed from a one column table to a two column table, we added another table inside of a data cell in order to reset the number of columns. We will do something similar with our divides. When we reach the main content area where we will be adding a second column, instead of adding a new table, we will add a new wrapper to go around our divides in this row of elements.

To distingush this interior wrapper from the main wrapper which goes around all of the elements, we will call this interior wrapper a container. Any time you want to change the number of columns in a row, simply add a container around the new row.

In the previous section, we ran into problems with page layouts breaking on narrow screens with both the inline block method and the float method. In this section, we will cover two ways of solving this problem – both of which use the Text Align property. First, we will look at Text Align Justify and then Text Align Center.

The Text Align Justify Method
A key to understanding inline-blocks is that they behave as if they are words in a sentence. Each block is one word. Let’s use the word BLOCK to stand for the block element. If we type the word block three times and then align it left or float it left, we get this:

BLOCK BLOCK BLOCK

There is too much space on the right. Take the same three words and align or float them right, we get this:

BLOCK BLOCK BLOCK

Now there is too much space on the left. Take the same three blocks and align them justified:

BLOCK BLOCK BLOCK

They behave as if they are aligned left. This is because the Justify alignment is not triggered until the text flows onto a second line. Let’s add two more blocks and place some space between them to create a second line. Here is how the blocks look with the normal align left.

BLOCK BLOCK BLOCK BLOCK BLOCK

Note that the blocks are not centered. Take this group of five blocks and copy paste it below. Then set the paragraph style for Alignment Justified.

BLOCK BLOCK BLOCK BLOCK BLOCK

The first three blocks now are centered on the row.

Now imagine if we could replace the last two blocks with a very long but hidden word or special hidden block so that there would always be more than one line after the first three blocks. This is the theory behind the Text Align Justify method. What it really does is treat blocks as if they were words and then justify the blocks on the page by adding a hidden element after the blocks to make sure the blocks are in a paragraph that is more than one line long. You can then have one block, two blocks, three blocks, four blocks or more and they will all line up equally across the row in your web page. Let’s look at some examples.