4.4. CSS Layout Tutorial

Layout is not easy in CSS. Let’s go through some of the layout properties.

4.4.1. Inline vs. Block

One of the properties that can be set for a CSS element is the display property.

The display property defaults to different values depending on what tag is being used. For the <div> tag, it defaults to block. This is what a bunch of blocks look like. Note that they take the whole width, and work their way down the page.

Alt

Here is the code behind that web page. For simplicity, I’m putting the style in the <head> of the document. Normally styles would all go into a different style sheet.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Sample document for CSS layout</title>
        <style>
            .word_class {
                border-style: solid;
                border-width: 2px;
                margin: 3px;
                padding: 3px;

                /* display defaults to 'block' */
                display: block;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="word_class">This</div>
            <div class="word_class">is</div>
            <div class="word_class">a</div>
            <div class="word_class">test</div>
            <div class="word_class">document.</div>
        </section>
    </body>
</html>

Below we’ve switched from block to inline. With inline everything flows like text on a line. For the <span> tag, inline is the default.

If you resize a window with several inline elements, they will line-wrap.

Alt 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Sample document for CSS layout</title>
        <style>
            .word_class {
                border-style: solid;
                border-width: 2px;
                /* Note that top/bottom margin are ignored for 'inline' */
                margin: 3px;
                padding: 3px;

                /* display defaults to 'block' */
                display: inline;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="word_class">This</div>
            <div class="word_class">is</div>
            <div class="word_class">a</div>
            <div class="word_class">test</div>
            <div class="word_class">document.</div>
        </section>
    </body>
</html>

There are several other options for the display property. You can see them here.

4.4.2. Inspect Elements

You can do some really amazing things with modern web browsers. Select an element on your page, and right-click on it. (Step 1 below.)

Then, select “inspect.” (Step 2 below.)

Alt

Next, see that you’ll get panels that open up with the page you see, the HTML, and the CSS that is applied. As you click on the HTML (Step 1 below.) Note that Chrome highlights the element on out page (Step 2 below.) It also shows you the applied style (Step 3 below.)

Alt

You can double click on the style information and change it! But the changes are not saved in your document. They are only temporary.

Alt

4.4.3. Position

Looking to center or right align a block? It isn’t intuitive. To center, use the margin property, and set it to auto. You can also right-align by setting the left margin to auto and the right margin to zero.

Here is an example:

Alt 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Sample document for CSS layout</title>
        <style>
            body {
                border-style: solid;
                border-width: 2px;
                border-color: red;
            }
            section {
                border-style: solid;
                border-width: 2px;
                border-color: blue;
                margin: 3px;
                padding: 3px;

                left: 30px;
                top: 30px;
            }
            .word_class {
                border-style: solid;
                border-width: 2px;
                margin: 3px;
                padding: 3px;

                /* display defaults to 'block' */
                display: block;
                width: 200px;
            }
            #word_2 {
            	/* Center a block */
            	margin: auto;
            }
            #word_3 {
                /* Right align a block */
            	margin-left:auto;
            	margin-right:0;
            }

        </style>
    </head>
    <body>
        <section>
            <div class="word_class" id="word_1">This</div>
            <div class="word_class" id="word_2">is</div>
            <div class="word_class" id="word_3">a</div>
            <div class="word_class" id="word_4">test</div>
            <div class="word_class">document.</div>
        </section>
    </body>
</html>

You can also “float” items. Resize the window and see some odd things. Note that floating objects are not contained in the section tag, but float outside of it.

Alt 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Sample document for CSS layout</title>
        <style>
            body {
                border-style: solid;
                border-width: 2px;
                border-color: red;
            }
            section {
                border-style: solid;
                border-width: 2px;
                border-color: blue;
                margin: 3px;
                padding: 3px;

                left: 30px;
                top: 30px;
            }
            .word_class {
                border-style: solid;
                border-width: 2px;
                margin: 3px;
                padding: 3px;

                /* display defaults to 'block' */
                display: block;
                width: 100px;
            }
            .left_class {
            	float: left;
            }
            .right_class {
            	float: right;
            }


        </style>
    </head>
    <body>
        <section>
            <div class="word_class left_class">This</div>
            <div class="word_class left_class">is</div>
            <div class="word_class left_class">a</div>
            <div class="word_class left_class">test</div>
            <div class="word_class left_class">document.</div>
            
            <div class="word_class right_class">This</div>
            <div class="word_class right_class">is</div>
            <div class="word_class right_class">a</div>
            <div class="word_class right_class">test</div>
            <div class="word_class right_class">document.</div>            
        </section>
    </body>
</html>

By default positions are static and ignore top, bottom, left, right directives. If instead you select relative, then you can set top and left values to specify how many pixels relative to the last element should this new element be.

Important: You can also specify negative numbers. Try it!

Alt 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Sample document for CSS layout</title>
        <style>
            .word_class {
                border-style: solid;
                border-width: 2px;
                margin: 3px;
                padding: 3px;

                /* display defaults to 'block' */
                display: inline;
            }
            #special {
                position: relative;
                left: 30px;
                top: 30px;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="word_class">This</div>
            <div class="word_class">is</div>
            <div class="word_class">a</div>
            <div class="word_class">test</div>
            <div class="word_class">document.</div>
            <div id="special" class="word_class">I'm Special</div>
        </section>
    </body>
</html>

If you select absolute, then the element is not relative to the lastprior element. From the name, it would be reasonable to think that “absolute” positioning means “absolutely place this here.” And that it would not be relative to anything.

Not so. Absolute positioning is relative to the element that contains it. Rather than relative to the prior element. In the example below, the special element is relative to the <section> tag. Which you can’t see.

Alt 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Sample document for CSS layout</title>
        <style>
            .word_class {
                border-style: solid;
                border-width: 2px;
                margin: 3px;
                padding: 3px;

                /* display defaults to 'block' */
                display: inline;
            }
            #special {
                position: absolute;
                left: 30px;
                top: 30px;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="word_class">This</div>
            <div class="word_class">is</div>
            <div class="word_class">a</div>
            <div class="word_class">test</div>
            <div class="word_class">document.</div>
            <div id="special" class="word_class">I'm Special</div>
        </section>
    </body>
</html>

Here, we style the <section> tag. This makes it a little easier to see how the document is relative to the position of the <section> tag.

Alt 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Sample document for CSS layout</title>
        <style>
            .word_class {
                border-style: solid;
                border-width: 2px;
                margin: 3px;
                padding: 3px;

                /* display defaults to 'block' */
                display: inline;
            }
            #special {
                position: absolute;
                left: 30px;
                top: 30px;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="word_class">This</div>
            <div class="word_class">is</div>
            <div class="word_class">a</div>
            <div class="word_class">test</div>
            <div class="word_class">document.</div>
            <div id="special" class="word_class">I'm Special</div>
        </section>
    </body>
</html>

There are many limitations to the original CSS’s layout options. Version 3 of CSS (CSS3) includes flex box which is supposed to help. There are other CSS libraries that have their own method of layout.

Flex-box playground:

https://codepen.io/enxaneta/full/adLPwv/