10/13

6. Layout

We call layout the visual structure of the different parts of the webpage. Before coding directly the final version of the webpage with the text content and images, it can be interesting to set up first the general layout of the containing boxes.

We already saw some properties allowing to set the layout of elements. As for instance:

  • Display (inline, block, inline-block), allowing to set the main flow organization of elements (left to right, top to bottom), as well as their behavior with respect to interior elements.

  • Margin (left, right, top, bottom), and padding, allowing respectively to set the position of the box with respect to the surrounding elements, and the content with respect to the border of the box.

  • Text-align (left, center, right), allowing to set the horizontal position of the content of a box.

Vertical alignment

When using inline and inline-block elements (such as text and images) exhibiting different size, it is possible to adjust their respective vertical alignement though the use of vertical-align.

Consider the following HTML body code

<div>
        <img src="palm_tree.png" alt="Palm Tree">
        <div> This is some text here !</div>
</div>

<div>
        <div> There is more text there !</div>
        <img src="palm_tree.png" alt="Palm Tree">
</div>

Add classes in HTML and create CSS file in order to obtain the following appearance

[Corresponding Webpage]

Margin auto

The command margin: auto; enable the browser to automatically compute the left and right space to center horizontally the element with respect to the parent. Note that the element to be centered must be have a block display.

HTML

<div class="wrapper">
<div class="box color1">Text in centered box. </div>
</div>

<div class="wrapper">
<div class="box color2">Text in centered box. </div>
</div>

CSS

.wrapper {
        display: inline-block;
        width: 300px;
        height: 300px;
        background-color: lightyellow;
        border: 2px solid black;
        padding: 15px;

        margin: 15px;
}
.box {
        width: 150px;
        height: 60px;
        border: 2px solid black;

        margin: auto;
}
.color1 {
        background-color: salmon;
}
.color2 {
        background-color: lightgreen;
}

[Corresponding Webpage]

Note on units

The size of the containers can be set in various units.

  • px allow to define the size in number of pixels. Websites are however typically seen from several hardwares (smartphones, tablets, computers, …​) with various resolution and window size. Hard-coding all element size in pixel size may look good on computer screen size under a specific resolution and window size, but not on smartphone and conversely.

It is possible to use relative sizes, thus allowing the render to adapt to the context of the screen and resolution.

  • % define the size of an element in percent with respect to the parent one.

  • vw/vh define the size of an element in percent with respect to the viewport width

Test the following code. Resize you window and note the automatic adaptation of the elements (the gray box always span 75% of the viewport width and height, while the yellow and salmon box have a span a specific percentage of their parent grey box size).

HTML

<div class="container">
        <div class="A"></div>
        <div class="B"></div>
</div>

CSS

.container {
        width: 75vw;
        height: 75vh;
        background: lightgray;
}

.A {
        width: 75%;
        height: 25%;
        background-color: yellow;
}

.B {
        width: 25%;
        height: 50%;
        background-color: salmon;
}

[Corresponding Webpage]

  • em is a unit to define a size with respect to the current element font-size.

Example

Base size, <span class="twice">twice larger</span>.
<h2> Base title size, <span class="twice">twice larger</span>.</h2>
.twice {
        font-size: 2em;
}

As a summary:

  • Prefer, when possible, to define size of elements in percentage rather than fixed pixel size.

  • Traditionaly, percent are used to defined containing box size, while em are used to handle text-related elements (defining the text size in percent is also valid, but less common).

Flex Box

Flex box is a new display type, designed to be more flexible (/responsive) than previous inline/block/block-inline display. Flex-box is specifically adapted to define the layout of an array of elements inside a container.

Example of usage

HTML

<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
</div>

CSS

.container {

        height: 75vh;
        width: 75vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5vh;
        background-color: lightgray;

        display: flex;
}

.item {
        background-color: yellow;
        border: 2px solid black;
        text-align: center;
        font-size: 1.5em;

        margin: 5px;
        width: 100px;
        height: 100px;
}

[Corresponding Webpage]

Note the automatic size adjustement of the content when the window is squeezed

Fonts

Extra fonts can be included in the webpage.

When the font is not directly available, it must be loaded as a ressource of the webpage. Two methods are possible

  • Within the HTML file using a link tag

<link href='FontURL' rel='stylesheet'>

  • In the CSS document using import

@import url('FontURL');

Once the font is loaded, it can be used from the font-family property.

font-family: FontName;

As fonts may not always be available, it is requiered that you also provide generic base font in the font-family values as a fall-back such as serif, sans-serif, monospace, etc.

ex.

font-family: FontName, serif;

Exemple of code

HTML

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
    <title> CSE104 </title>
</head>

<body>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</body>

</html>

CSS

p {
        font-size: 2.0em;
        font-family: "Sacramento", serif;
}

[Corresponding Webpage]

  • Note that Google fonts propose a large variety of fonts easy to include within your webpage.