The CSS display property

Using the display property, you can change the flow of an element. These are the most common values:

• block makes an element start on a new line and take up the full width of the container (forming a block of content, if you will).

• inline leaves an element in its position in the flow of content. It will not start on a new line, and it will take up only the horizontal space it needs. Certain properties, like height and width, have no effect on inline elements.

• inline-block is a hybrid of inline and block. The element will display inline but take on the properties of a block, like height, width, and spacing.

• none completely hides the element and removes it from the flow. It will only be viewable in source code.

To set a link to display as a block-level element:

1. In your style sheet, type the selector you want to change. In this example, use a.

2. If you want the style to apply to a specific class, type a period followed immediately by the class name, then add a left curly brace. Here, use .button {.

3. Type the property you want to assign to the selector. In this case, use display: block;.

4. Type } to close the style declaration.

This moves any link (<a> tag) of the class button from inline to its own block (FIGURE 15.2).

Height and width

Unless you specifically define a height and width, they’ll default to a size big enough to hold the content (with the caveat that block-level elements are the full width of their parent container). To define a specific size, you can use the height and width properties. They accept the same units you would use to measure text size: px, em, rem, and %.

To set a specific height and width for an element:

1. In your style sheet, define the element to which you want to apply the rule, followed by a left brace. In this example, use aside {.

2. Type width: followed by the desired width. In this case, 400px;.

3. Type height: followed by the desired height. In this case, 200px;.

4. Type } to end the style declaration.

This gives you a 400x200 box for all aside elements (FIGURE 15.3).

Finally, you can set minimum and maximum values for both height and width.

The minimum properties are min-width and min-height. They say, “Do not drop the container’s size below this value.” If you set min-width: 300px; the container will always be at least 300px wide but can be wider, depending on the content.

And max-width and max-height say, “Do not let a container go beyond this size.” So max-height: 500px means the container can be shorter than, but will never be taller than, 500px.

Each of these can make sense depending on the context. But the main thing to remember is that the height and width properties are fixed. They will always be exactly the size you define, no matter the size of the browser window or parent container (FIGURE 15.4).

Finer control over values

With both padding and margin, you’re not locked into assigning a single value to the attribute for the entire element. You can define a different value for the left, top, right, and bottom of each box. There are a few ways to do it.

You can explicitly define each side, as shown in TABLE 15.1.

You can also use a shorthand version, in which you set the values for each of the four sides individually in a single declaration:

Click here to view code image

padding: [top] [right] [bottom] [left];
margin: [top] [right] [bottom] [left];

For each property the values are applied in clockwise order around the element, starting from the top. Slightly shorter would be:

Click here to view code image

padding: [top/bottom] [left/right];
margin: [top/bottom] [left/right];

Here, you have two values instead of four, where the first value sets the top and bottom spacing, and the second value sets the left and right spacing.

Finally, there’s also a three-value declaration:

Click here to view code image

padding: [top left/right bottom];
margin: [top left/right bottom];

Here, the first value is for the top spacing, the middle value is for the left and right, and the last is for the bottom.

Using margin: auto

Sometimes when you set a width, you might want to center the container on the page. That’s very easy to do using the margin property. You can set margin to the value auto, and it will calculate the width of the parent container, subtract the width of your target element, and distribute the leftover value evenly on both sides.

Say you have a wrapper class that has a width of 800px:

.wrapper {
    width: 800px;
}

On most tablets and desktop devices, the width of the window (and therefore, the entire website) will be more than 800px, and your content will look like what you see in FIGURE 15.7, where there is a lot of space to the right of the container.

Using the keyword auto with margin allows you to automatically center that content in the middle of the window.

You can use the auto keyword in two ways: as the only value for margin (margin: auto) or in conjunction with a set top and bottom (margin: 30px auto). Both cases result in horizontal centering. The latter also includes a 30px margin before and after the container.

To center an element automatically with margin: auto:

1. In your style sheet, type the selector you wish to target, followed by a left curly brace. In this case, use .wrapper {.

2. On a new line, type width:, followed by the value. In this case, 800px;.

   Setting a width for the container isn’t strictly necessary, but without it you will not see the results of using the auto keyword.

3. On a new line, type margin:, then the values, including values for options like top or bottom margins. In this case, type 30px auto;.

4. On a new line, type }.

Your full ruleset looks like this:

.wrapper {
    width: 800px;
    margin: 30px auto;
}

That results in a div with the class wrapper being center aligned on a page (FIGURE 15.8).

Using floats

The float property takes an element out of its normal flow and places it to the right or left inside the container:

aside {
        float: right;
}

This moves the aside element to the right and lets everything else flow around it (FIGURE 15.10). You can see the code in CODE 15.1.

Note that the floated element will be surrounded by any elements below it, so if you want it to appear in the top of a container, it will have to be the first element.

You can even use float to create a grid of elements. Floating all elements of a particular type takes them out of the normal flow and lines them up next to each other. Before the creation of the layout modules Flexbox and CSS Grid (which you’ll learn about in Chapter 16), this is how many web designers created column-based layouts.

To create a grid layout with floats:

1. In your style sheet, type the selector you wish to target, followed by a left curly brace. This example targets paragraphs, so use p {.

2. Type float:.

3. Type left; to force the element to float on the left side of its container.

   To force the element to float on the right side, you would use the value right.

4. Type margin: to set the spacing between the elements. For this example, use 15px;.

5. Type width: to set the width of each element. This example uses 300px;.

6. Type } to close the style declaration.

This makes the paragraphs flow onto the page in a grid (FIGURE 15.11).

Clearing floats

While this can work, it can also cause havoc for any elements in the normal flow. Elements can end up in unexpected places to work their way around floated elements. And although there are better ways to achieve a grid (as you’ll see in Chapter 16), you could always use the clear property, which tells the element to place itself below any floated content:

.next-section {
     clear: left;
}

Other values for this property include right and both.

Using the position property

Another way to place elements and containers precisely is by using the position property. It accepts several values, which I’ll list in a moment.

This property is often accompanied by a set of properties that position elements in specific areas of the window or container: left, right, top, and bottom. These all accept the normal units (px, em, rem, %), and they all have slightly different meanings depending on the value of position. Here are the values for position, and positioning properties:

• static: This is the default value. There is no special positioning.

• relative: Places the container based on its normal position. The directional properties will move the container away from its normal position.

  So left: 50px moves the container to the right by 50 pixels, similar to margin.

• fixed: The container is in a fixed position on the page, so no matter what part of the page is being displayed to the user, the container will be in the same spot.

  The directional properties in this instance are exact coordinates; left: 0; top: 0; means the container will be at the left edge at the very top of the window.

• absolute: The container is positioned in a fixed position in its parent container.

  Directional properties work the same way as those for the fixed position.

• sticky: The container is positioned relatively (as in the normal flow) until the user reaches a specific scroll position. Then it sticks in place on the screen.

  For example, top: 0 positions the element relatively in the normal flow until the page is scrolled and there are zero pixels between the element’s top edge and the visible area of the webpage. Beyond that threshold, the element behaves as if it used fixed positioning and will be fixed to zero pixels from the top.

To get a better idea of how each of these work, check out Video 15.5.

To make a sticky sidebar:

The starting markup for this task is listed below. Since there’s no HTML5 element specifically for “wrapping” other elements (from a semantic meaning standpoint), it’s common practice to use the <div> element with a wrapper class:

<div class="wrapper">
    <aside>
        ...
    </aside>
    <main>
        ...
    </main>
</div>

1. In your style sheet, type .wrapper {.

2. Type width: 800px;.

3. Type margin: 30px auto;.

4. Type }.

5. Type main {.

6. Type width: 500px;.

7. Type }.

8. Type aside {.

9. Type width: 260px;.

10. Type padding: 15px;.

11. Type float: right;.

12. Type position: sticky;.

13. Type top: 0;.

14. Type }.

This code produces a two-column layout with a sticky sidebar. You can also add a background and border to aside to distinguish it a bit (FIGURE 15.12). You can see the code in CODE 15.2 and 15.3.