The book "CSS for the pros"

The world of cascading style sheets is constantly being improved. More and more web developers are realizing that although they think they know CSS, they are far from fully understanding. In recent years, the language has evolved greatly, so even those developers who were once proficient in CSS today can get completely new skills to catch up. This book is designed to meet these needs: provide deep language skills and lead to success in new developments and application of the latest CSS features.

This book is called CSS for the Pro, but it is also a comprehensive book. In cases where some concepts or principles are difficult or, as a rule, are interpreted incorrectly, the author explains in detail what they mean or how they work and why. The other chapters may not be so comprehensive, but Keith Grant provides enough information to enable you to work effectively and move in the right direction if you want to expand your knowledge. In general, this book will fill in the gaps in your theoretical knowledge.

Some topics: animation, typography, flexible containers, and even the CSS stack are worthy of separate books. The author’s goals are to flesh out your knowledge, help fill in the gaps in it, and instill a love of CSS for you.

Excerpt. 4.1. The purpose of floating elements

Despite the fact that the floating elements were not designed to design the page layout, they did a good job of this. However, in order to understand the meaning of floating elements, we must understand their original purpose.

A floating element is an object (often an image) aligned on one of the sides of the container, which allows the flow of a document to flow around it (Fig. 4.1). This arrangement is often found in newspapers and magazines, so to achieve the described effect, floating elements were added in CSS.

In this illustration, the element is left-aligned, but you could place it at the right-hand edge too. The floating element is removed from the normal document flow and aligned on one side of the container, after which the document flow will flow around the area where this element is now located. If you align two floating elements on one side, then they line up one after the other (Fig. 4.2).

If you have been writing CSS code for some time, then this behavior is not news for you, but it should be noted that floating elements are not always applied in this way, despite the fact that this is their original purpose.

Already in the early days of CSS, developers realized that they could use this simple tool to move sections of a page when typesetting all types of layouts. Floating elements were not a page layout tool, but for almost two decades we have been using them precisely for these purposes.

We did it because it was the only option. In the end, it became possible to use the display: inline-block or display: table properties - alternative, albeit very limited. Until recently, until flex containers and CSS grids were added, floating elements remained a trump card in the layout of page layouts. Let's see how they work. For example, create the page shown in fig. 4.3.


In the examples in this chapter, you will use floating elements to position each of the four gray fields. And inside the fields, place floating images next to the text. Create a blank page and connect it to the stylesheet created earlier, then add the code in Listing 4.1 to the page.



This listing gives the structure of the page: the header and the main element containing all the page material. Inside the main element are the name of the page, as well as an anonymous div container, that is, a div element that does not have a class or identifier. This allows you to group four gray media objects, in the body element of each of which there is an image.

Before you start working with floating elements, you need to build the external structure of the page. Add Listing 4.2 to the stylesheet file.



This code allows you to set some basic styles for the page, including the correction of the box-sizing property and the lobotomized owl selector (see chapter 3). Next, you need to limit the width of the page content (Fig. 4.4). Pay attention to the light gray margins on both sides, as well as the fact that the cap and the main container are the same width.


This markup is often used to center page content. You can achieve this by placing the content inside two nested containers and adjusting the fields of the inner container so that it does not go beyond the outer ones (Fig. 4.5). Web developer Brad Westfall calls this approach a double-container pattern.


In our example, the body element acts as an external container. By default, this element occupies 100% of the page width, so you do not have to apply new styles to it. We packed all the page content inside this element, into an element acting as an internal container. Add the code in Listing 4.3 to your stylesheet.


By using the max-width property instead of the width property, the element is compressed to values ​​less than 1080 pixels if the resolution of the viewport is below this value. In other words, the container will fill smaller viewing areas, but in larger viewing areas it will expand to 1080 pixels. This is important in order to avoid horizontal scrolling on devices with a small viewing area.

4.2. Collapsing container and clearfix

In the past, browser errors distorted the behavior of floating elements, however, this was typical mainly for Internet Explorer 6 and 7. I am pretty sure that you no longer need to support these browsers, so you should not worry about these errors. Now you can be sure that browsers will correctly handle floating elements.

However, some features of the behavior of floating elements may catch you by surprise today. These are not errors; floating elements behave exactly as they should. Consider how they work and how you can customize their behavior to create the desired markup.

4.2.1. What is container collapse

Align the four floating media objects on the page to the left - and the problems will not take long (Fig. 4.6).


What happened to the white background? We see it behind the name of the page (“Useful Tips”), however, it is limited to this, instead of expanding downwards and including all media objects. To see this on your page, add the code in Listing 4.4 to the stylesheet. Then consider why this is happening and how to fix it.


We set a light gray background for each media object, expecting that the white background of the container will be behind (or, rather, around) them. However, instead, the white background disappears at the top edge of the media objects. Why is that?

The problem is that, unlike elements of the normal document flow, floating elements do not add height to the parent elements. This may seem strange, but this property goes back to the original purpose of floating elements.

As you learned at the beginning of this chapter, floating elements are designed to let text flow around them. When you place a floating image in a paragraph of text, that paragraph does not enlarge to fit the image. So, if the height of the image is greater than the height of the paragraph, then the text of the next paragraph will begin immediately below the text of the first paragraph, therefore, the text of both paragraphs will flow around this floating image. The described is illustrated in fig. 4.7.


On your page, everything inside the main element, with the exception of the page name, is a floating element. Thus, only the name contributes to the height of the container, leaving all floating media objects to expand downstream beyond the white background of the main container. For us, this behavior is undesirable, so fix it. The main element should expand downwards and contain gray blocks (Fig. 4.8).


One way to adjust is to use clear, the adjacent property of a
floating element. If you place an element at the end of the main container
and use the clear property, this will cause the container to expand to the
bottom edge of the floating elements. The code in Listing 4.5 basically illustrates
what needs to be done. You can add it to your page for a while to
see how it works.


The clear: both declaration causes this element to move below the floating elements, instead of being located next to them. You can assign this property one of the values, left or right, to reset the flow around only those floating elements that are aligned to the left or right edge, respectively.

This allows you to set the desired size, but this approach is a bit like hacking, as it adds unwanted markup to the HTML code, which is why it takes on CSS functions. Therefore, you should remove the empty div container. Consider a way to accomplish the same task using only CSS code.

4.2.2. What is clearfix

Instead of adding another div container to the markup, we use a pseudo-element. Using the :: after pseudo-element selector, you can effectively insert an element into the DOM at the end of the container without adding it to the markup.

Listing 4.6 shows a general approach to solving the float problem, called clearfix. (Some developers prefer to shorten the class name to cf, which is convenient, because at the same time it is a shorthand for the phrase containing floats - the placement of floating elements.) Add the following code to your stylesheet.


It is important to know that the clearfix class applies to an element that contains floating elements. A common mistake is to apply this class to an inappropriate element, for example, directly to a floating element or a container that stands after a container with floating elements.

However, there is one problem with the clearfix method: the fields of enclosed floating elements will not collapse outside the container with clearfix applied, and the fields of non-floating elements will collapse, as usual. You see this on your page, where the heading “Useful Tips” is firmly pressed to the top edge of the white main element (see Figure 4.8): its field collapsed outside the container.

Sometimes, developers prefer to use a modified version of the clearfix method, which will accommodate all fields and will be more predictable. Adding this version to your page will prevent the collapse of the top field of the page name outside the main element (Fig. 4.9), which will leave the desired distance above the title.


To use the modified version, update the clearfix method code in your stylesheet, as shown in Listing 4.7.


This version uses the display: table property, not display: block. Applying it to both pseudo-elements, :: before and :: after, you will fit any fields of child elements located in the upper and lower parts of the container. The sidebar “clearfix method and display: table property” below explains in more detail how this works.

It is up to you to decide which version of the clearfix method to use in your projects. Some developers make this argument: collapsing fields is a fundamental feature of CSS, so they prefer not to fit fields into a container. But since no version fits floating element fields, other developers prefer a more streamlined behavior for the modified version. Each argument has its own reason.

The clearfix method and the display: table
property Using the display: table property in the clearfix method fits fields thanks to some CSS features. Creating a table element (or in this case a pseudo-element) implicitly creates a table row inside this element, as well as a table cell in a row. Since fields do not collapse through table elements (as mentioned in Chapter 3), fields will not collapse through a table pseudo-element.

It might seem that using the display: table-cell property would give you the same effect. However, the clear property only works for block elements, which the table cell is not. Therefore, the clear property cannot be applied with the display: table-cell property. In general, to fit the fields, reset the flow around all floating elements and the implied cell, use the display: table property.

4.3. Unexpected "capture" of a floating element

Now that the white container contains floating media objects, another problem becomes apparent: four media objects do not form two identical lines, as we need. Instead, the first two blocks (“Physical Culture” and “Temp”) are on the same line, as expected, but the third block (“Change”) is located on the right, under the second block. With this arrangement, a large gap remains under the first block, this is due to the browser placing floating elements as high as possible.

In fig. 4.10 is a simplified diagram.


Since block 2 is lower than block 1, for block 3 there is simply no place under block 1. Instead of bypassing block 1, block 3 “captures” it. In other words, block 3 does not align to the left, but flows around the bottom corner of block 1. The

nuances of this behavior depend on the height of each floating block. Even a 1 pixel difference can cause this problem. At the same time, if block 1 is shorter than block 2, then for block 3 there will be no edge for which it could catch, and you will not encounter the described problem until the content changes, which will lead to a change in the height of the elements.

Aligning several floating elements on one edge, you can get any of many layout options depending on the height of each block. Even changing the width of the browser window can rebuild everything, because it will affect the flow around lines of text and, accordingly, change the height of the elements. On the page, we want to see two floating blocks per line (Fig. 4.11).


To fix this problem is simple: the third floating element needs to reset the flow around the floating elements located above it. Or, in other words, the first element in each row should reset the flow around the floating element located above it. Since you have two blocks per line, it will be necessary for each odd element to reset the flow around the parent line. You can addressly select such elements using the pseudo-class selector: nth-child (). Add the following rule set to the stylesheet (Listing 4.8).


This code will work even if you add new elements to the page later. The code applies to the first, third, fifth elements, etc. If you wanted to place three elements per line, then you could target the selector to every third element: .media: nth-child (3n + 1) (see the appendix And for more information about using the selector: nth-child).

Add fields for media objects so that a gap forms between them. The lobotomized owl selector will also set the top margin to all elements except the first. This will cause alignment of the elements in the first line to fail, so you need to reset the top field of these elements. Update your stylesheet as shown in Listing 4.9.



»More information about the book can be found on the publisher’s website
» Contents
» Excerpt

For Khabrozhiteley 25% discount on coupon - CSS

Upon payment of the paper version of the book, an electronic version of the book is sent by e-mail.