1

10. 10. Page Layout with Page Layout with CSSCSS

Multi-Column Layouts

2

In this section, we will investigate how CSS-based Web design provides some simple templates that will enable you to build basic two-, three- or even multi-column Web pages.

3

Review

Over time, three general page layout approaches have emerged for web design:

- Liquid – pages that resize as the browser window is resized.

- Fixed – pages that put the content in a page area that stays at a specific pixel width, regardless of the browser window’s dimensions.

- Elastic – pages that have page areas that get larger or smaller when the text is resized – zoom.

4

Optimal Line Length – a layout concern

Line length is a measure of the number of words or characters in a line of text.

A general rule is that the optimal line length is 10 to 12 words, or between 60 and 75 characters.

When line lengths grow too long, the text becomes more difficult to read.

Not only is it hard to focus long enough to get to the end of a long line, it is also requires extra effort tofind the beginning of the next line again.

May also need nasty horizontal scrolling!

5

Line length is at the heart of the debate over which layout technique is superior.

With liquid layouts, line lengths might get too long whenthe browser is sized very wide.

With fixed-width designs, line lengths may become awkwardly short if the text is sized large within narrowand rigid column widths.

The elastic layout, however, offers predictable line lengths even when the text is sized larger.

- This makes it a popular option for balancing design and accessibility priorities.

6

Liquid page design

Web pages are liquid by default.

The behaviour of the normal flow of HTML markup is to flow into the browser window, filling all available space.

If the browser window is re-sized, the elements re-flow to adapt to the new size.

However, many designers make a conscious decision and actually specify via CSS that the page is liquid.

7

Liquid page design

Liquid page layouts (also called fluid layouts) follow the default behaviour of the normal flow as HTML elements are laid out on the page.

In other words, the page area and/or columns within thepage are allowed to get wider or narrower to fill the available space in the browser window.

There is no attempt to control the width of the content

- the text is permitted to reflow as required.

8

Example Full-size window

9

Re-sized window

10

Advantages

You do not have to design for a specific screen resolution.

You avoid potentially awkward empty space because the text fills the window.

Liquid pages keep with the spirit and nature of the medium.

Disadvantages

With large screens, line lengths can get very long and uncomfortable to read.

They are less predictable. Elements may be too spread out, or too cramped, at extreme browser dimensions.

11

How to create liquid layouts

A liquid layout is normally created by specifying widths in percentage or em values (i.e. relative measures).

Often, as we will see later, a container div (usually named “content”, “container”, “wrapper”, or “page”) is used to hold any header, columns and footer of the Web page, and the majority of these components have percentage widths, and thus adjust to the user’s screen resolution.

While some designers may give set (i.e. fixed) widths to certain components in liquid layouts, such as margins, the layout in general uses percentage widths so that the view is adjusted for each user.

12

Example liquid layout

13

Example – a two-column layout: the columns are each encapsulated within their own div elements, and the width of each div has been specified as a percentage of the available browser window width.

14

div#main { width: 70%; margin-right: 5%; float: left; background: yellow;}

div#extras { width: 25%; float: left; background: orange;}

Create some “breathing space”between the two columns.

70%+5%+25%=100%

15

The main column will always be 70% of the width of the window, and the right column always fills 25% (the remaining 5% is used for the “breathing space” between the columns), regardless of the window size.

1616

Example - An alternative is to not specify the width at all for one column, in which case its width will fill the available width of the browser window – via the default auto setting of the browser. This is a combination of liquid and fixed layouts.

17

div#main { position: absolute; top: 0; left: 225px; background: yellow; }

div#extras { width: 200px; position: absolute; top: 0; left: 0; background: orange; }

No width specifiedfor this column. This is the liquid part.Width will move in and out as necessary.Positioned in browser window to leave room forextras column.

Fixed part – width specified.Will always stay this width.Like main column, this column is positioned absolute.

200+25=225

18

19

Fixed Layouts

Fixed-width layouts, as the name implies, stay put at a specified pixel width as determined by the Web designer.

- The layout does not stretch to fill the browser window, but remains at its set width, whatever you do to the size of the browser window.

A fixed website layout has a wrapper that is a fixed width, and the components inside it have fixed widths.

The important thing is that the container (wrapper) element is set to not move.

No matter what screen resolution the visitor has, he or she will see the same width as other visitors.

20

Assume a 960-pixel width – this is OK if most website users are assumed to browse in 1024×768 resolution or higher.

21

One of the main concerns with using fixed-width layouts is that if the user’s browser window is not as wide as the page, the content on the right edge of the page will not be visible!

- Although it is possible to scroll horizontally, it may not always be clear that there is more content there in the first place!

22

By having a pre-determined width for the whole layout and its columns, the designer can be certain that window width and screen resolution will not compromise his/her design, specifically with regard to carefully measuredinternal elements such as banners, images, and carefully positioned text.

On the downside, this means that whatever width you declare for your whole design then this is the width that will be “served” to all browser users.

- A 780 pixel-width design might look great with a 800×600 screen resolution, but it starts to look a bit dwarfed with a modern 1280×1024 screen resolution.

23

Advantages

The layout is predictable.

It offers better control over line length.

Fashions come and go; however, it is worth noting that many well-known Web designers are using fixed-width designs.

Disadvantages

Content on the right edge will be hidden if the browser window is smaller than the page.

Text elements still reflow if the user resizes the font size, so it does not guarantee the layout will stay exactly the same.

Line lengths may grow awkwardly short at very large text sizes.

24

Example

25

Re-sized window

Part of page sliced away!

26

How to create fixed-width layouts

Fixed-width layouts are created by specifying width values in pixel units (i.e. absolute measure).

The content of the entire page is encapsulated by a div that can then be set to a specific pixel width.

This encapsulating div may also be centered in the browser window.

Widths of column elements, and even margins and padding, are also specified in pixels.

27

First, you need to pick a page width, which is usually based on a common screen size, i.e. the screen dimensions in pixels.

Look at

Resolution of computer displays – market share

Until quite recently,

1024 x 768 pixels - 44% of market

1280 x 1024 pixels - 31%

Other (e.g. 800 x 600 pixels) – 25%

But this has now changed ...

28

29

30

You also need to decide where the fixed-width layout should be positioned in the browser window.

- By default, it will be placed at the left edge of the browser window, with the extra (unused) space to the right of it.

Some designers opt to centre the page, splittingthe extra space over left and right margins, which may make the page look as though it better fills the browser window.

- This is a strategy for controlling the width of a page while allowing for varying screen resolutions.

31

Example

32

The next examples show two fixed-width layouts.

Both use fixed-width pages, but position the content differently in the browser window.

33

Example - Assuming a screen with a 800 x 600 pixel resolution.

A left-aligned fixed-page layout

34

#wrapper {width: 750px;

position: absolute;}

#extras {position: absolute;

top: 0px;

left: 0px;

width: 200px;

background-color: orange; }

#main {margin-left: 25px;

background-color: yellow;}

The style sheet:

Container div for two column elements – total width 750px

Two columns - the first column is positioned top left of screen, and the second flows after it, but has a fixed size of 750–200-25 = 525 px.

First column has fixed width 200px

Second column creates 25px “breathing space”.

35

The markup:

<div id=wrapper>

<div id=extras> …</div>

<div id=main>…</div>

</div>

36

37

Example - A centred fixed-page layout

38

In CSS, the proper way to centre a fixed-width element is to specify a width for the div element that holds all the page’s contents, then set its left and right margins to auto.

According to the CSS visual formatting model, this willhave the net effect of centring the element in the browser window.

The margin widths will adjust automatically to use the available window space.

#container { position: relative; width: 750px; margin-right: auto; margin-left: auto;}

39

#wrapper {width: 750px; position: relative; margin-left: auto; margin-right: auto;}

#extras {position: absolute; top: 0px; left: 0px; width: 200px; background-color: orange; }

#main {margin-left: 25px; background-color: yellow;}

Assuming a screen with a800 x 600 pixel resolution.

Container div for two column elements

Two column elements

The style sheet:

40

41

Elastic Layouts

Elastic layouts combine resizable text with predictable line lengths.

- The layout expands or contracts with the size of the text.

If the user makes the text size larger, the layout expands proportionally.

Likewise, if the user likes the text size very small, the layout shrinks to fit.

The result is that line lengths (in terms of words or characters per line) stay the same regardless of the text size.

42

Default font sizeExample: Zen Garden Elastic lawn

http://www.csszengarden.com/?cssfile=/063/063.css&page=0

43

Largest font size - notice that when the text size gets bigger, so does the content area of the page. However, instead of rewrapping in the larger layout space, the line length and line breaks stay exactly the same as before.

44

Advantages

Provides a consistent layout while allowing flexibility in text size.

Tighter control over line lengths thanliquid and fixed layouts.

Disadvantages

Images do not lend themselves to re-scaling along with the text and therest of the layout.

The width of the layout might exceed the width of the browser window atlargest text sizes.

45

How to create elastic layouts

The key to elastic layouts is the em, the unit of measurement that is based on current font size of the text. (Percentages are just as good!)

- For example, for an element with 12-pixel text, an em is 12 pixels.

Specifying the font size of text (say, in paragraphs) in ems allows the text to be resized with the zoom and text size features of all modern browsers.

For an example, see

http://www.alistapart.com/articles/elastic/

http://www.htmldog.com/articles/elasticdesign/

46

An elastic design mixes the two other main layout types.

It works by sizing all elements with ems.

The goal is to have everything grow larger or smaller in proportion with the user’s preference.

Good article

http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

47

Example

A two column layout which consists of #main and #sidebar div elements:

<div id="wrap"> <div id="main"></div> <div id="sidebar"></div></div>

#wrap { max-width:70em; }

The wrapper is set to a maximum width of 70 em.By using em as the unit for max-width, the width of the page will depend on font size, and line length will be similar no matter what size the text is.

48

To create the two columns, widths are assigned to the two components and floated in opposite directions:

#main { float:left; width:59%;}#sidebar { float:right; width:29%;}

The widths are set in percentages to make both columns expand and contract as the browser window is resized. This is a liquid layout.

49

Now for the elastic part ...

For all text content, specify measurements in ems or %

For example, either

body { font-size: 0.8em; }

h1 { font-size: 2em; }

p { font-size: 1em; }

or

body { font-size: 80%; }

h1 { font-size: 200%; }

p { font-size: 100%; }

50

Reading

http://www.alistapart.com/articles/elastic/

http://www.thesitewizard.com/webdesign/liquid-elastic-fixed-relative-layout.shtml

51

Some more examples of multi-column layouts ...

52

Multi-column Layouts Using Floats

A popular way to create a multi-column layout is to float one column to one side, and let the remaining columns wrap around it.

A margin may be used to keep the area around the floated column clear.

One of the advantages of floats is that it is easier to start page components, such as a footer, below the columned area of the page.

53

The drawback of float-based layouts is that they are dependent on the order in which the components (e.g. divs for the various sections such as columns and headers) appear in the HTML document.

- Getting the layout effect you are after may result in the sections of the HTML document not being in the “logical” order.

- This is not a big deal, but something to be aware of.

54

Example: Two-columns with a header and footer using the FLOAT method with a LIQUID layout.

The markup and styles in this example produce a liquid two-column layout with a header area, a main column of content, a sidebar, and footer as shown.

55

The Markup

The HTML document has been divided into four divs, one each for the header, content, extras, and footer.

<div id="header"> Masthead and headline</div>

<div id="main"> Main article</div>

<div id="extras"> List of links and news</div>

<div id="footer"> Copyright information</div>

56

The Style Sheet

#header { background: #CCC; padding: 15px; }

#main { float: left; width: 60%; margin-right: 5%; margin-left: 5%; }

The main content div is floated to the left and set to 60% of the available browser window width. A margin is applied to the left and right sides of the floated “main” div to add some “breathing space”.

15px all around header “box”

57

#extras { margin-right: 5%;}

A margin is added on the right edge of the “extras” div to add space between it and the browser window.

#footer { clear: left; padding: 15px; background: #CCC; }

The “footer” div is cleared (with the clear property) so that it starts below the floated main content column.

58

body { font-family: verdana, sans-serif; margin: 0; padding: 0;}

The margin and padding on the body element have been set to zero to clear the default browser settings.

This allows the shaded header and footer areas to go right up to the edge of the browser window without any white space gaps.

59

Result

60

Example: Three-columns with a header and footer using the FLOAT method and a FIXED layout.

This example uses floated elements to create a fixed-width, three-column layout (a main content column flanked by left and right sidebars) with an optional header and footer.

61

The Markup – using a container div

<div id="container"> <div id="header"> Masthead and headline </div> <div id="links"> List of links </div> <div id="main"> Main article </div> <div id="news"> News and announcements </div> <div id="footer"> Copyright information </div></div>

Order is important!

62

Markup Notes

All of the content elements in the document have been placed in a “container” div to which the fixed-width measurement is applied.

With floating, the order that the elements appear in the source document is important.

- To get the narrow sidebars (“links” and “news”) on either side of the “main” content, need to place the “links” div before the “main” div, and the “news” div after the “main” div, to keep the style sheet straightforward.

63

The Style Sheet

#container { width: 750px;}

#header { background: #CCC; padding: 15px; }

#links { float: left; width: 175px; }

#main { float: left; width: 400px; }

#news { float: left; width: 175px; }

The style sheet floats the “links” “main,” and “news” divs to the left.

The result is that they accumulate against the left edge of the containing div block, thus creating three columns.

Because there are no padding, border, or margin settings for each floated element, the sum of their widths is equal to the width of the outer container.

175 + 400 + 175 = 750

64

#footer { clear: both; padding: 15px; background: #CCC; }

body { font-family: verdana, sans-serif; font-size: small; margin: 0; padding: 0;}

The clear: both property has been added to the footer to make sure it starts below all of the floated elements.

65

Result

66

Layouts Using Absolute Positioning

Absolute positioning can also be used to create a multi-column page.

An advantage is that the order of the sections in the HTML document is not as critical as it is in the float method, because the divs can be positioned absolutely anywhere.

The disadvantage is that you run the risk of elements overlapping, and content being obscured.

- This makes it problematical to implement full-width elements below columns (such as a footer), because it will get overlapped if a positioned column above it grows too long.

67

Example: Two-columns with a narrow footer using the ABSOLUTE positioning method with a LIQUID layout.

This example creates a right sidebar column (containing “links” and “news”) using absolute positioning.

68

The Markup Markup Notes

<div id="header"> Masthead and headline</div>

<div id="main"> Main article</div>

<div id="extras"> List of links and news</div>

<div id="footer"> Copyright information</div>

69

Assume that the header element has a height of 70 pixels, plus 30 pixels of padding = 100 pixels in total.

The style sheet (on next slide) positions absolutely the “extras” div element against the right side of the page, and 100 pixels down from the top to leave room for the header element.

The “main” content div is given a right margin wide enough to leave a space for the newly-positioned“extras” sidebar.

70

The Style Sheet

#header { height: 70px; padding: 15px; background: #CCC;}

#main { margin-right: 30%; margin-left: 5%; }

#extras { position: absolute; top: 100px; right: 0px; width: 25%; padding: 10px;}

In this example, know that the header is exactly 100 pixels tall (70 pixels height plus 30 pixels of padding, top and bottom).The 30% right margin leaves space for the “extras” column that is 25% of the page plus 5% space between the columns.

The “extras” div is positioned absolutely 0 pixels from the right edge of the browser and exactly 100 pixels down from the top.

71

#footer { margin-right: 30%; margin-left: 5%; padding: 15px; background: #666; }

body { font-family: verdana, sans-serif; font-size: small; margin: 0; padding: 0;}

The margins applied to the main content are also applied to the footer div. This is to prevent the footer from being overlapped by a long sidebar.

72

Result

73

Example: Three-columns with a narrow footer usingthe ABSOLUTE positioning method with a LIQUID layout.

In this template, both sidebar columns are absolutely positioned, and margins are applied to both sides of the main content to make way for the sidebars.

74

The Markup

<div id="header"> Masthead and headline</div>

<div id="main"> Main article</div>

<div id="links"> List of links</div>

<div id="news"> News and announcements</div>

<div id="footer"> Copyright information</div>

75

Because absolute positioning is not order-dependent, the main content div can appear in its preferableposition, i.e. first in the HTML document.

Only the “links” and “news” div elements are positioned absolutely in this layout.

76

The style sheet is essentially the same as that for the previous example, with the exception that margins are applied to both sides of the “main” and “footer” div elements to make room for columns on both sides.

The “links” and “news” divs are positioned against the left and right edges of the browser window (technically, it is their containing block), respectively.

The width of the positioned columns is narrower than the margins on the main content div to allow space between columns.

77

The Style Sheet

#header {height: 70px;padding: 15px; background: #CCC;}

#main {margin-left: 25%; margin-right: 25%;}

#links {position: absolute;top: 100px; left: 0px; width: 22%;}

Height of header = 100 pixels (15+70+15) – two sets of padding

Make room for left and right sidebars.

Place “links” sidebar below header and against the left edge of the browser window.Its width is less than the “main” column margins to add space between the columns.

78

#news {position: absolute;top: 100px; right: 0px; width: 22%;}

#footer {margin-right: 25%; margin-left: 25%;padding: 15px;background: #CCC;}

Place “news” sidebar below header and against the right edge of the window.Its width is less than the “main” margins to add space between the columns.

The footer gets the same margin treatment as the main content column to make sure the side columns do not overlap it.

79

Result

80

Example: Three-columns with rules and padding between columns using the ABSOLUTE positioning method with a FIXED layout.

81

In this three-column layout example, all three columns are absolutely positioned in a fixed layout.

In addition, borders and padding have been added between columns.

The values for left (that is, the distance from the left edge of the containing block) for all three content divs (“links,” “main,” and “news”) are relative to the left edge of their div.

82

Whenever you add padding, margins, or borders to a fixed-width layout structure, it is important that the sum of the element widths plus all their extras does not exceed the total container width.

In this example, a 750 pixel overall width is divided into two 150 pixel sidebars and a 450 pixel main column.

Although it may be tempting to set the width of each div to these values, unfortunately, this will not work.

The width property applies only to the content area.

83

The figure below breaks down all the measurements that span the width of the “container” div.

84

The Markup

<div id=“container”>

<div id="main"> Main article </div>

<div id="links"> List of links </div>

<div id="news"> News and announcements </div>

</div>

Because this is a fixed-width layout, all of the content has been wrapped in a “container” div.

All three content-containing div elements are absolutely positioned.

- So, the main content div can appear first in the HTML document.

85

The Style Sheet

#container { position: relative; width: 750px; }

#header { height: 70px; padding: 15px; background: #CCC; }

The “container” div has a fixed width (750 pixels) and its position is set to relative to establish it as a containing block for the absolute positioned column elements.

Total height of header = 100 pixels (15+70+15)

All three content divs (“links,” “main,” and “news”) are absolutely positioned below the header.

86

#main { position: absolute; top: 100px; left: 150px; width: 428px; border-left: solid 1px black; border-right: solid 1px black; padding-left: 10px; padding-right: 10px;}

Width of “main” = 450 px minus 2px of border and 20px of padding = 428 pixels.Create solid vertical lines.

10 pixels padding left and right.

87

#links { position: absolute; top: 100px; left: 0px; width: 134px; padding-left: 8px; padding-right: 8px;}

#news { position: absolute; top: 100px; left: 600px; width: 134px; padding-left: 8px; padding-right: 8px;}

body { font-family: verdana, sans-serif; font-size: small; margin: 0; padding: 0; }

Width of “links” and “news” = 150 px minus 16 px total padding = 134 pixels

8 px of padding left and right.

Left = 600 px (i.e. 450 px + 150 px) leaves room for first 2 columns.

88

Questions?Questions?