Internet Technology and Web Design (BIT122/BS)

Lecturer: Nkoloogi Blasius

Email: [email protected]
Tel No: 0757886712

LECTURE 6: CSS (PART 4)

CSS Layout

Introduction

In the previous lecture, we explored how to manipulate margins, define element dimensions, and
an overview of the CSS box model. This lecture will focus on arranging CSS boxes in relation to
the viewport and other elements. We will cover different display settings, positioning, and later
modern layout tools like flexbox.

Learning Objectives

By the end of this lesson, students should:

● Understand the various display and position properties in CSS.

● Apply static, relative, absolute, fixed, and sticky positioning.
● Begin using modern layout tools like Flexbox.

1. CSS Layout Features

1.1 Block and Inline Elements

● Block: Used for sections in a webpage (e.g., <div>, <p>). These elements take up the
full width available.
○ https://www.w3schools.com/html/html_blocks.asp
 ● Inline: Used for text or inline elements like <span>, <a>. These elements only take up
as much width as needed.
○ https://www.w3schools.com/html/html_blocks.asp

1.2 Tables for Layout

● Table Elements: Ideal for displaying two-dimensional tabular data.

○ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

2. The Display Property

The display property defines how an element is rendered on the page. Every HTML element
has a default display value, depending on what type of element it is. The display property is used
to change the default display behavior of HTML elements. We can set an element to be a
block-level or inline-level.

By default:

● Block elements take up the full width of the page.

● Inline elements take up only as much width as their content.

You can modify an element’s display behavior:

● inline-block: Allows elements to sit next to each other while maintaining block-like
properties.
○ https://www.w3schools.com/css/css_inline-block.asp

Youtube video:
https://www.youtube.com/watch?v=9T8uxp5hQ60&ab_channel=BroCode

3. The Position Property

The position property controls how an element is positioned on the page. Values include:

● Static (default)
 ● Relative
● Absolute
● Fixed
● Sticky

3.1 Position: Static

Elements are positioned according to the normal flow of the page (default behavior). Thus, the
static position is always positioned according to the normal flow of the page.

They are not affected by top, bottom, left, and right properties.

Example Code:

index.html

<div class = “parent”>

<div class = “box” id= “one”> one </div>

<div class = “box” id= “two”> two </div>

<div class = “box” id= “three”> three </div>

</div>

style.css

.parent{

border: 2px black dotted;

display: inline-block;

.box{
display:inline-block;

background: yellow;

width: 100px;

height: 100px;

#two{

background: green;

3.2 Position: Relative

Relative works like static positioning, only that it allows working with ‘‘top’, ‘right’, ‘bottom’,
‘left’ properties.

An element’s position is adjusted relative to its original place in the normal flow. This means that
the box position is calculated according to the normal flow by applying the properties ‘top’,
‘right’, ‘bottom’, ‘left’. The relative position places an element relative to its current position
without changing the layout around it. The relatively positioned element will cause it to be
adjusted from its normal position. Other content will not be adjusted to fit into any gap left by
the element.

Example Code:

style.css

#two {

top: 20px;

left: 20px;
 background: green;

position: relative;

3.3 Position: Absolute

The element is taken out of the normal document flow and positioned relative to its nearest
positioned ancestor. The box’s position (possibly size) is specified with the ‘top’, ‘right’,
‘bottom’, and ‘left’.

style.css

#two {

top:20px;

left: 20px;

background: green;

position: absolute;

By applying position: absolute to the green box, it will not leave not gap where it would have
been. The absolute position places an element absolutely relative to its parent position changing
the layout around it. The position of green box is moved based on the its parent position (dotted
border). Thus moving 20px to the left and from the top of the dotted border.

3.4 Position: Fixed

Fixed-positioned elements remain in the same place even when the page is scrolled. These are
positioned relative to the viewport.

3.5 Position: Sticky

Sticky positioning combines the behaviors of relative and fixed positioning. It toggles between
relative and fixed, depending on the user's scroll position.

Youtube video:
https://www.youtube.com/watch?v=h_Smqpqs_1k&t=91s&ab_channel=CemEygiMedia

4. Z-Index Property

The z-index property controls the stack order of elements (which element appears on top).
Only works with positioned elements.

https://www.w3schools.com/cssref/pr_pos_z-index.php

Youtube Video:

https://www.youtube.com/watch?v=l55hSbBUdmQ&ab_channel=KevinPowell

5. Modern Layout Tools: Flexbox

Flexbox is designed to provide a more efficient way to lay out, align, and distribute space among
items in a container, even when their sizes are unknown or dynamic. It works best for
1-dimensional layouts.

You can control how items stretch, shrink, and align within a container using Flexbox properties.

Example Code:

index.html

<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>

style.css
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
background-color: lightblue;
padding: 10px;
margin: 5px;
text-align: center;
}

Conclusion

In this lecture, we have focused on essential layout techniques in CSS, covering the display
property and various positioning methods. We have also introduced Flexbox as a powerful tool
for creating one-dimensional layouts.

Next Lecture: We will cover CSS Grid, a two-dimensional layout system that allows for more
complex designs using rows and columns. Make sure to review the key concepts of Flexbox, as it
will help you understand how both of these modern layout techniques complement each other.