Rev 2.

5
September, 2020

Lab 4: Page Layout: Part 1

WEB1201: Web Fundamentals

1 Introduction
This lab is intended for you to understand page layouts by using CSS positions and to apply
them to a web page. We will be looking at several concepts or ideas:

1. Elements as boxes.
2. How pages are laid out (i.e. normal flow) using block, inline and inline-block.
3. How an element can be taken out of the normal flow by “floating” them (using floats).

2 Objectives
At the end of this lab, you should be able to:

1. Explain the different element positioning options using CSS.

2. Apply the different element positioning options to layout a page.

3 Deliverables, timing and additional notes

The estimated time of completion for this lab is approximately two (2) hours (assuming you
have gone through the theory). This does not include the time you will need to answer the
questions. You are to compile your work after every lab - this includes all codes (and comments
where necessary), documentation, completed tasks and answered questions.

4 Materials and Equipment

1. A computer with a web browser and text editor.
2. Files from your previous labs.
3. A template file: and additional files:
Note: These are 7zip files and will require the appropriate program to unpack them. The
official 7zip website will have such programs for Windows and Linux. For Mac users,
you can use Keka.

Note

Have a logbook to write down notes for labs. This will help you revise and reflect on the
work you have done in the lab. The lab is not intended as a typing exercise but one that
requires you to reflect and think about what you have done and learnt.

1
5 Recap
In the previous labs, you might have noticed that when you place content on a web page, they
appear as you place them, i.e. if you place an image after some text, the image will appear
after the text. Recall the time you added the border in the previous lab. What was the extent
of the border? Does it wrap around the text or does it extend to the end of the line? These
are examples of block elements. In another case when you used the strong tag, the element
just existed within the text, or in other words; inline with the text. This is an example of inline
elements.

So why is this important? For you to understand how pages are laid out, which is the point of
this lab. I want you to think of page layout in this manner. The simplest analogy is a river.
Everything rendered on your viewport is dependent on the flow of you HTML code, i.e. the
elements will be laid out as they appear in you code. This is called the normal flow. If you do
not want an element to be part of the flow, it needs to float (in the river analogy, float on the
water). In short, this lab can be thought of this way (I will be using the term box loosely and
perhaps interchangeably with the term element.):

1. Everything on the page is a box.

2. The boxes are arranged in a flow, whatever that is declared in your HTML document will
be read line-by-line. (Do not confuse this with being displayed line-by-line.)
3. There are different types of boxes and how the page looks like will depend on the box
type.
4. You can remove boxes from the flow (by floating the element away from the Normal flow)
to change how the page looks like.

To better understand the concept of how pages are laid out, we need to look at the following
topics:

1. The CSS Box Model

In the previous lab, the box model was not described but shown to enable you to under-
stand the relationship between padding, border and margin. In this lab, understanding
that everything laid on on the screen as a box will help you understand page layouts.
2. The Normal flow.
Let’s look at the normal flow and how different box types (block, inline and inline-block)
are laid out.
3. Floats
Taking elements out of the normal flow and the different options for “floating”.

2
6 The CSS Box Model
Every element in a document is bound by a rectangular box (See Figure 1).

margin-top
border-top
padding-top Content
Padding

padding-right

margin-right
padding-left

border-right
margin-left
border-left
Border
Content
Margin
(transparent)
padding-bottom
border-bottom
margin-bottom

Figure 1: The CSS Box Model.

The box consists of four (4) components:

1. Content
The content area can consist of a combination of text and web page elements such as
images, paragraphs, headings, lists, and so on. The visible width of the element on a web
page is the total of the content width, the padding width, and the border width. However,
the width property only configures the actual width of the content; it does not include any
padding, border, or margin.
2. Padding
The padding area is between the content and the border. The default padding value is
zero. When the background of an element is configured, the background is applied to
both the padding and the content areas.
3. Border
The border area is between the padding and the margin. The default border has a value of
0 and does not display.
4. Margin
The margin determines the empty space between the element and any adjacent elements.
The solid line in Figure 1 that contains the margin area does not display on a web page.
Use the margin property to configure margins on all sides of an element. The margin is
always transparent—the background color of the web page or parent element shows in
this area. Browsers have default margin values set for the web page document and for
certain elements such as paragraphs, headings, forms, and so on.
• To configure the size of the margin, use a numeric value (px or em).
• To eliminate the margin, configure it to 0 (with no unit).
• Use the value auto to indicate that the browser should calculate the margin.

3
7 Normal flow
Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a
page before any changes are made to their layout. The flow is essentially a set of things that are
all working together and know about each other in your layout. Once something is taken out of
flow (by floating1 ) it works independently.

In normal flow, inline elements display in the inline direction, that is in the direction words
are displayed in a sentence according to the Writing Mode2 of the document. Block elements
display one after the other, as paragraphs do in the Writing Mode of that document. In English,
the writing mode is horizontal-tb3 , inline elements display one after the other, starting on the
left, and block elements start at the top and move down the page. An example of the normal
flow with this Writing Mode is shown in Figure 2. [Happy number] Let n be positive integer.
The number n is said to be happy, if the last digit of the number n equals 1.

1 <div class="div1"> 1 <div class="div1">

2 This is the first box. 2 This is the first box.
3 </div> 3 // The 2nd div, inside the first
4 // The 2nd div, after the first 4 <div class="div2">
5 <div class="div2"> 5 This is the second box.
6 This is the second box. 6 </div>
7 </div> 7 </div>

(a) The flow of one div element to another div (b) The flow of one div element within another
element (i.e. non-nested div). div element (i.e. a nested div).

Figure 2: Two examples of Normal Flow on two methods of coding the div elements: sequential
and nested.

You will notice that there is mention of Block and Inline element types. We have described their
behaviour in a Normal Flow layout. A summary and illustration of an element’s display type
is given in Section 7.1.

1
Note that floats have been superseded by flex and grids.
2
The Writing Mode is a CSS property set using writing-mode and sets whether lines of text are laid out
horizontally or vertically, as well as the direction in which blocks progress. This property specifies the block flow
direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level
content flows within a block container. Thus, it also determines the ordering of block-level content.
3
i.e. Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is
positioned below the previous line.

4
7.1 Element display type

In summary you will generally encounter three types of elements which are illustrated in Fig-
ure 3:

1. Block elements:
• respect all margins and padding
• force a line break after the block element
• does not allow other elements to their left and right
• acquires full-width if width not defined (i.e. by default)
2. Inline elements:
• respect left and right margins and padding, but not top and bottom
• cannot have a width and height set
• allow other elements to sit to their left and right
• Read more here
3. Inline-block elements:
• placed like an inline but behaves like a block
• allows other elements to sit to their left and right
• respect top and bottom margins and padding
• respect height and width

display: block display: inline display: inline-block

display: display: inline display: display: display: display:

block inline-block inline-block inline-block

display: inline display: inline

block

display:
block

Figure 3: Illustration of the different element types determined by the CSS display property.

Do you need to set the display property? It is not necessary as every element will have a default
display type. For instance, a div has a display:block although it does not have to be explicitly
set. As each element has an inherent display type, the reason the display property is shown
here is to illustrate how different elements behave with the normal flow. You can read about the
other CSS display properties here.

5
8 CSS Float
Float properties are used to configure elements that floats from the normal flow. In this part, we
will look at using float:left or float:right to move an element to the right or left side of either
the browser window or another element. The browser renders these elements using normal flow
and then shifts them to either the right or left as far as possible within their container (usually
either the browser viewport or a div element). Floats cause other floated elements (see Figure 5)
and inline content (the paragraph text in Figure 4 and 5) to flow around the float, but other block
boxes ignore the float (e.g. the blue box in Figure 4 and 5).

How do you use the float?

1. float:right
To float the element on the right side of the container.
2. float:left
To float the element on the left side of the container.
3. Specify a width for the floated element unless it has an implicit width, e.g. an image
(<img>) element.

Here is an example of using a float element that generates the example shown in Figure 4.
1 .box {
2 float: left;
3 margin: 15px;
4 width: 150px;
5 height: 150px;
6 border-radius: 5px;
7 background-color: rgb(207, 34, 22);
8 padding: 1em;
9 }
10 .special {
11 background-color: rgb(79,185,227);
12 padding: 10px;
13 color: #fff;
14 }
15 <body>
16 <h1>Simple float example</h1>
17 <div class="box">This is a float element</div>
18 <p class="special">Lorem ipsum ...... </p>
19 <p>Duis felis ......</p>
20 </body>

6
 Figure 4: Example of using the property {float: left}.

So let us examine how the float works based on the given example — the element with the
float set on it (the <div> element) is taken out of the normal layout flow of the document and
stuck to the left hand side of its parent container (<body>). Any content that comes below the
floated element in the normal layout flow will now wrap around it, filling up the space to the
right-hand side of it as far up as the top of the floated element. There, it will stop.

Note that floats are not the best way to layout a page and there are other methods (Flexbox and
Grids which are part of the CSS layout) that have superseded this.

You can read more about floats here: MDN Floats and All about floats

Figure 5: Two floats side by side. Shown here with property {float: left} for both floats.

7
Task 1: Create a float element
In this task, you are going to add an image with a caption beneath it. The text around it should
wrap around the image.

• Download an image of your choice. (Suggestion: a flower or animal).

• Give your image a caption. Hint: You can use figure and figcaption but not required to.
Try: Centering the caption. Also try to add the caption without using figure and figcap-
tion.

• Copy some text from the web about the flower or animal.

• Set the image to be on the left, with a gap around the text and the image. Remember to
include a heading as well.

• Choose the colours you think are appropriate for your web page.

• Your final page should look somewhat like Figure 6.

Note

As with all labs, take note of what you did (both right and wrong). The aim of the labs is
not a typing exercise but for you to think about what you are doing and why you are doing
it the way you are.

Figure 6: What you should expect to get after the float task.

8
Task 2: Adding another photo
In this task, you are going to add another photo on the right side this time.

• Download another image of your choice. If possible, find a long portrait like picture or
put two photos one above the other to make it look like a portrait rectangular (See the
right side float in Figure 8).

• Apply the three different float types: none, left, right.

• Compare and save your outputs in a file.

8.1 Float issues: The “Collapsing” Parent

When float property applied to the element inside the non floated parent, the parent element
does not stretch up automatically to accommodate the floated elements. If this parent element
contained nothing but floated elements, the height of it would literally collapse to nothing (see
Figure 7). This behavior is called collapsing parent. This is not always obvious if you do not
apply some visual properties like background or borders to the parent elements, but it is impor-
tant to be aware of and must dealt with to prevent strange layout and cross-browser problem

Parent element “collapsed”

Float Float Float Float

Left Left Left Left

Figure 7: What you should expect to get after the float task.

8.2 Clearing a float

Now that you know how to create a float, you will need to know how to clear floats, i.e. do
not let it flow. We use the clear CSS property and it sets whether an element must be moved
below (or cleared of) the floating elements that precede it. The clear property applies to floating
and non-floating elements. You can set the value of the clear property to left, right, or both,
depending on the type of float you need to clear.

Read more at: MDN clear property

Let us look at it using an example. The div element contains two floats (left and right) and a
paragraph. The clear CSS class is applied to the paragraph element.

9
 1 .clear{clear:none} 1 .clear{clear:left} 1 .clear{clear:right}

(a) Applying clear:left. (b) Applying clear:left. (c) Applying clear:right.

This is the default value.

Figure 8: Examples of applying clear.

8.3 Clearing a float using a line break <br>

A common technique to clear a float within a container element is to add a line break element
configured with the clear property. This is opposed to adding the clear property to the next
element, which in our case is <h2>. To demonstrate the difference what these two approaches
have, the same code from before is used but a division with a background colour (i.e. the one
with the burlywood background) is added to demonstrate the difference.

In Figure 9a the clear property is applied to a <br> tag (highlighted). This extends the division
the linebreak is in to the end of the floating element. In Figure 9b, the clear property is applied
to a <h2> tag (highlighted). This allows the earlier division to end where it is and heading 2 is
pushed to after the float.

8.4 Overflow

The overflow property (a shorthand for overflow-x and overflow-y) is often used to clear a
float, although its intended purpose is to configure how content should display when it is too
big to fit in its block formatting context (i.e. it only works and needed for a fixed height flow
block content). If the element’s content is:

• smaller than the size of the content area of the containing box, the content will appear as
is.
• larger than the size of the content area of the containing box, the contents will overflow
into the next element.(See Figure 10c).

10
 1 <h1>Float clear example</h1> 1 <h1>Float clear example</h1>
2 <div style="background-color: 2 <div style="background-color:
burlywood"> burlywood">
3 <div class="box">This is a float 3 <div class="box">This is a float
element or an image or element or an image or
anything that will fit in this anything that will fit in this
space.</div> space.</div>
4 4
5 <p class="special">Lorem ipsum 5 <p class="special">Lorem ipsum
dolor sit amet, consectetur dolor sit amet, consectetur
adipiscing elit. Nulla luctus adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia aliquam dolor, eu lacinia
lorem placerat vulputate. </p lorem placerat vulputate. </p
> >
6 <br style="clear:left"> 6 </div>
7 </div> 7
8 8 <h2 style="clear:left">Other
9 <h2>Other things</h2> things</h2>
10 <p>Duis felis orci, ........</p> 9 <p>Duis felis orci, ........</p>

(a) Using the clear property in a <br> tag. (b) Using the clear property in a <h2> tag.

Figure 9: Examples of applying clear to a <br> and <h2> tag.

Table 1: The overflow property.

Value Purpose
visible Default value. The content is displayed and if it’s too large, the content
will overflow and extend outside the area allocated to it.
hidden The content is clipped to fit the area allocated to the element in the
browser viewport.
auto The content fills the area allocated to it and if needed, scrollbars are
displayed to allow access to the remaining content.
scroll The content is rendered in the area allocated to it and scrollbars are
displayed.

11
 1 <div style= 1 <div style=
2 "background-color: 2 "background-color:
sandybrown; sandybrown;
3 overflow:auto; 3 overflow:auto;
4 > 4 height: 100px">

(a) Using the overflow:auto property in a div (b) Using the overflow:auto property in a div with
without the height set. the height set.

1 <div style=
2 "background-color:
sandybrown;
3 overflow:visible;
4 height: 100px">

(c) Using the overflow:visible property in a div

with the height set.

Figure 10: Examples of applying overflow:auto and overflow:visible to a div with and without
a height set on the div.

12
Task 3: A floats only division and clearing the float
In this task, you are going to: (1) create multiple floats within a division, then (2) add words and
clear them using clear and overflow.

1. Download three (3) images of your choice.

OR
Create a box.
2. Make them all floats (either float left or right) and put them inside a division (this will be
the “parent” division).
3. Give your division a background colour to allow you to observe the division.
4. Observe the output when there is nothing in the parent division.
5. Add some text to the parent division and some line breaks. Observe the output.

Now to clear the float using a few scenarios.

Scenario 1: Add clear:both to a line break tag.

Scenario 2: Add clear:both to the heading 2 tag.

Scenario 3: Add overflow:auto to the division that contains the float.

– Add a lot of text to that division.

– Change the height of the division to: 25%, 50%, 100%, 125% and 150% the float
height.

Change the overflow to the other options: visible, hidden and scroll.

9 Two-column Page Layout

A common design for a web page is a two-column layout. This can be accomplished with CSS
by configuring one of the columns to float on the web page. This section introduces you to two
formats for the two-column page layout.

9.1 Two Columns with Left Navigation

See Figure 11 for a wireframe of a two-column web page. In this layout, the left column will
contain the navigation.

13
 1 nav{float:left;
2 width: 150px}
3 #wrapper{width: 80%; wrapper
4 margin-left: auto;
nav rightcol
5 margin-right: auto;
header
6 background-color: #A9A9A9;}
7 #rightcol{margin-left: 155px; main
8 background-color: #FFFFFF;}
9
10 <div id="wrapper">
11 <nav>
12 </nav>
13 <div id="rightcol">
footer
14 <header> </header>
15 <main> </main>
16 <footer> </footer> Figure 11: Wireframe for a two-
17 </div> column layout with left navigation
18 <div>

9.2 Adding Hyperlinks to the nav bar

9.2.1 Using Unordered List in a Vertical Navigation

One of the things we will want to do is to populate the (vertical) nav bar we created earlier with
links and one of the easiest ways to do that is to create a list of links. We can use an unordered
list in our navigation.
1 <ul>
2 <li><a href="index.html">Home</a></li>
3 <li><a href="menu.html">Menu</a></li>
4 <li><a href="directions.html">Directions</a></li>
5 <li><a href="contact.html">Contact</a></li>
6 </ul>

However, from Figure 12, you can see that it is not what we ex-
pect it to look like. Ideally, we do not want the bullets nor want
our links to be underlined. In the next section, we will look at
how to configure the lists.
Figure 12: Creating an un-
ordered list navigation.

14
 Table 2: CSS properties for ordered and unordered list markers.

Property Description Value List Marker Display

list-style-type Configures the style none No list markers
of the list marker displayed.
disc Circle
circle Open circle
square Square
decimal Decimal numbers
upper-alpha Uppercase letters
lower-alpha Lowercase letters
lower-roman Lowercase Roman
numerals
list-style-image Image replacement The url keyword Image displays in
for the list marker with parentheses front of each list
surrounding the item
URI.
list-style-position Configures inside Markers are
placement of the list indented. Text
marker wraps under the
markers.
outside (default) Markers have
default placement.

9.2.2 Configuring the lists markers

With any list, you may not always want to see the list markers (bullets for unordered lists and
arabic numerals for ordered lists). We can remove the list markers by specifying the list-style-
type property. See Table 2 for common property values.

9.2.3 Remove the Underline with CSS

To remove the underline from your navigation hyperlinks, set the text-decoration property to
none.

9.2.4 Using Unordered List in a Horizontal Navigation (The CSS display property)

You may be wondering how to use an unordered list for a horizontal navigation menu. As
list items are block display elements, they need to be configured as inline display elements to
display in a single line. The CSS display property configures how the browser renders, or
displays, an element on a web page. See Table 3 for a list of commonly used values.

15
 Table 3: CSS display property.

Value Purpose
none The element will not display
inline The element will display as an inline element in the same line as the
surrounding text and/or elements.
inline-block The element will display as an inline display element adjacent to an-
other inline display element. Can also be configured with properties of
block display elements including weight and height.
block The element will display as a block element with a margin above and
below.

One of the ways we can configure the navigation bar from vertical to horizontal is to change the
display of the list items (i.e. <li>) from block to inline.
1 nav ul{list-style-type:none;} // removes the bullet
2 nav li{display: inline;} // makes the list horizontal rather than vertical
3 nav a{text-decoration: none; padding-right: 10px;} // adds a padding of 10px to
the right of every anchor

Note: We have not covered this type of CSS style selector. I may have briefly mentioned it in a
video. It is a “Descendant combinator”. What nav li means is “Selects all <li> elements inside
<nav> elements”. You can read more about them here: CSS Combinators and Selectors.

10 CSS Interactivity with Pseudo-Classes

Have you ever visited a website and found that the text hyperlinks changed color when you
moved the mouse pointer over them? Often, this is accomplished using a CSS pseudo-class,
which can be used to apply a special effect to a selector. The five pseudoclasses that can be
applied to the anchor element are shown in Table 6.5.

Table 4: Commonly used CSS pseudo-classes

Pseudo-Class When it is applied

:link Default state for a hyperlink that has not been clicked or visited.
:visited Default state for a visited hyperlink.
:focus Triggered when the hyperlink has keyboard focus.
:hover Triggered when the mouse pointer moves over the hyperlink.
:active Triggered when the hyperlink is actually clicked.

Notice the order in which the pseudo-classes are listed in Table 4. Anchor element pseudo-
classes must be coded in this order (although it’s alright to omit one or more of those listed).

16
If you code the pseudo-classes in a different order, the styles will not be reliably applied. It’s
common practice to configure the :hover, :focus, and :active pseudo-classes with the same
styles.

To apply a pseudo-class, write it after the selector. The following code sample will configure
text hyperlinks to be red initially. The sample also uses the :hover pseudo-class to configure
the hyperlinks to change their appearance when the visitor places the mouse pointer over them
so that the underline disappears and the color changes.
1 a:link {color: #FF0000;}
2 a:hover {text-decorations:none;
3 color: #000066;}

Task 4: Restructure your previous website into a two-column

layout with a left navigation bar
In this task, you are going to restructure your previous website (Trillium) into a two column
layout. Here is the summary of changes:

• The website will no longer use the original structure but the structure shown in Sec-
tion 9.1.

• You can choose to use the original background or use a solid colour background.

• Your end result should look somewhat like Figure 13 but chances are with different
colours.

How do you go about these changes?

1. Obtain a copy of your previous website. You will be needing the resources from that
project.
2. Create a basic two-column layout with a left navigation bar using the codes shown in
Section 9.1. Do not just copy the codes as is. You will need to fit into the basic template
we have been using.
3. Use a styled unordered list for the navigation and apply pseudo-classes to it.

Task 5: Changing the layout of your website

Create a new web site with a top header section spanning two columns, content in the left
column, navigation in the right column, and a footer section below the two columns. All this
must be in a wrapper (as shown in Figure 11).

17
 Figure 13: What you should expect to get after you create the two-column layout.

1. Illustrate the using a wireframe diagram the layout described above.

Note: You can find the answer here but do not look at it before you try it out
yourselves. You must learn how to draw a wireframe diagram from a description.
2. Create a code template for your given layout. For the wrapper, set it:
• centered
• width: 80% of the browser viewport
• min width: 960px, max width 1200px
• colour (background and text): select a colour of your choice
3. Configure your (Trillium) header to be in the top header section.
4. Put the content in the main section.
5. Create new navigation links using a styled unordered list.
• Rather than just allowing users to click on the words, you want to allow the user to
click on an area (like a button) around the words. This can be done by:
(a) setting the display property to the value block of the anchor to display the
anchor element as a block, and
(b) to extend the size of this block beyond just the content area (or the text), add
some padding.
Here is a snippet of a sample code:
1 nav a {display: block;
2 padding: 20px;
3 ....}

6. Apply a pseudo-class to the navigation bar (see Section 10).

18
Task 6: Create a photo gallery
Create a photo gallery using an unordered list by setting the display property to inline-block.
The purpose of this task is to show you

1. Download eight images, create an unordered list for the images and add captions for each
of the images.
2. Add a width property for each of your images based on the width property of the list
items. (Try changing the width size of the list items and observe the changes).
3. Add this CSS to your website.
1 ul { list-style-type: none; }
2 li { display: inline-block;
3 width: 255px;
4 padding-bottom: 10px;
5 margin: 10px;
6 text-align: center;
7 font-style: italic;
8 font-family: Georgia, serif; }

11 CSS Positioning
Normal flow causes the browser to render the elements in the order that they appear in the
HTML source code. When using CSS for page layout there are situations when you may want
more control over the position of an element. The position property configures the type of

Figure 14: Photo gallery example.

19
Relative position explanation:
The coloured element is positioned relative to the original position of the element. The space
where the element is originally supposed to be still exists in the text.

(a) Relative position: Example 1. (b) Relative position: Example 2

Absolute position explanation:

The coloured element is positioned relative to the browser viewport. The space where the
element is originally supposed to be no longer exists in the text.

(c) Absolute position: Example 1 (d) Absolute position: Example 2

Fixed and Sticky position explanation:

Fixed position, fixes the element’s position in the viewport. Sticky is a combination of relative
and fixed. The element begins as relatively positioned and becomes fixed in the viewport as you
scroll down.

(e) Fixed position example (f) Sticky position example

Figure 15: Examples of different position values.

20
positioning used when the browser renders an element. Table 5 lists position property values
and their purpose and examples of the property values are shown in Figure 15.

Table 5: The position property

Value Purpose
static Default value. The element is rendered using the normal flow (i.e. as
they appear).
relative Configures the location of an element relative to where it would other-
wise render in normal flow.
absolute Precisely configures the location of an element outside of normal flow.
Position is relative to the container block.
fixed Configures the location of an element within the browser viewport. The
element does not move when the page is scrolled.
sticky A combination of relative and fixed. The element is relatively posi-
tioned until it reaches a limit and switches to a fixed position.

12 Header text image image replacement

Let’s look at one other use for CSS page layouts properties, such as the position and overflow
to add some Sometimes you may want to use a non-web-safe font in the company header section
and it is common to create a header as an image instead. The problem with this approach is that
the text contained in the image is not available to assistive technology such as screen readers
and is not immediately visible to search engines.

To overcome this, you want to add the header text as text but hidden from view. There are a few
ways to do this (and more here):

1. Draw a box off-screen

1 // Whether it is off screen depends on the display resolution
2 h1 { text-indent: -9999px}

2. Set h1 to the following

1 h1 { text-indent: 100%;
2 white-space: nowrap;
3 overflow: hidden; }

3. Set the font and background colour to be the same.

4. Set the font size to be zero.
5. Specify an attribute of display:noneto the element.
6. Specify an attribute of visibility:hidden to the element.

21
 7. Using the z-index, set the visible layer or text to have a higher-valued index than the
hidden layer or text.

13 Summary
This lab was to introduce you to page layouts using CSS - primarily looking at three (3) main
aspects:

1. The CSS Box Model

2. The Normal Flow and the different display types: inline, block, inline-block
3. Floats (breaking the normal flow)
4. Positions (of the floats)

It is expected that at the end of this lab:

1. You should have been exposed to the basics of page layout - how all elements on a page
are enclosed in a box.
2. We then looked at how these boxes interacted with each other - using floats (using the
float property) and positioning (using position property).

These were still covered because for a long time, the only reliable cross browser-compatible
tools available for creating CSS layouts were things like floats and positioning. These work but
when you try to do things that you would consider “basic” layout, using these tools are limiting
and can be difficult or impossible. Floats and positioning are now replaced by Flexbox and
Grids.

Submission
In your submission archive, you should have the following files/folders:

1. your observation file.

It is not stated what you should report on and this is based on what you have been asked to
do in the earlier labs. It is expected that you are now able to design your own experiments,
make observations, record them, discuss the results and come to some sort of conclusion.
2. files from each task in individual .zip files. (Standard Zip format using DEFLATE)
This means that within the submission archive, you should have the following (not all
tasks will be shown):
• Task1.zip
• Task2.zip
• ...

Ensure the following:

22
 1. The file is correctly named and in the correct format. The naming convention is found on
eLearn but for the sake of completeness, for this lab it will be:
<studentID>_<labNum>.zip, where:
• <studentID> is your student ID, and
• <labNum> is the number of this lab.
2. Do not use any other archive type. The file you submit must be the zip format. If you
are using your laptop and do not have that software, you can download a free zip archive
creator from the 7zip download page. If you are using 7zip, remember to change the
archive format to ZIP. For Mac users, you can use Keka.

The submission link will be found on eLearn. Adhere to the guidelines and instructions on
eLearn.

References
1. Block-level Elements on MDN
2. Inline Elements on MDN
3. Understanding the CSS Box model for inline elements
4. CSS display on Stackoverflow

23
Changelog
• Version: 2.5.1
Date: 13 Sep 2020
1. Corrected: padding-bottom label
2. Updated: Information regarding attached files.
• Version: 2.5
Date: 18 May 2020
1. Updated: Submission instructions.
2. Updated: Information regarding attached files.
• Version: 2.4
Date: 20 Sept 2019
1. Updated submission instructions.
• Version: 2.3
Date: 19 Sept 2019
1. Further updated the content of “Normal flow”. Redrew the figure.
2. Changed the figure of the Box Model to colour.
3. Rearranged some elements of the document for better position of page breaks.
4. Added a reference list.
• Version: 2.2
Date: 18 Sept 2019
1. Added content to the Introduction and a Recap section.
2. Changed the content of “Normal flow”. Added a figure to illustrate the different
display types.
3. Minor layout changes for better flow of the lab sheet.
4. Added submission instructions.
• Version: 2.1
Date: 17 Sept 2019
1. Added PDF bookmarks to the task

24