Obviously, website design is not only about fonts and color schemes but also about the arrangement of elements on the page. The site interface should be both convenient and aesthetic. By default, block page elements line up one under the other, and inline elements line up one after the other. But even simple interfaces may require a more customized layout.
Suppose we want to create a page with the text from some book. Let's take an excerpt from Victor Hugo's "The Hunchback of Notre-Dame" as an example. To complement and diversify the content of a page with a lot of text, it would be nice to add some illustrations. In this topic, we will consider how we can carefully arrange them with CSS.
The float property
First of all, let's take a look at the HTML code of the page that we will edit:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div style="border: 1px solid black; padding: 5px; width: 900px;">
<h1>The Hunchback of Notre-Dame</h1>
<p>... Notre-Dame de Paris is, in particular, a curious specimen of this variety. Each face, each stone of the venerable monument, is a page not only of the history of the country, but of the history of science and art as well. Thus, in order to indicate here only the principal details, while the little Red Door almost attains to the limits of the Gothic delicacy of the fifteenth century, the pillars of the nave, by their size and weight, go back to the Carlovingian Abbey of Saint-Germain-des-Prés.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Victor_Hugo-Hunchback.jpg" alt="Notre-Dame des Paris" style="height: 200px; width: 150px;" />
<p>One would suppose that six centuries separated these pillars from that door. There is no one, not even the hermetics, who does not find in the symbols of the grand portal a satisfactory compendium of their science, of which the Church of Saint-Jacques de la Boucherie was so complete a hieroglyph. Thus, the Roman abbey, the philosophers’ church, the Gothic art, Saxon art, the heavy, round pillar, which recalls Gregory VII., the hermetic symbolism, with which Nicolas Flamel played the prelude to Luther, papal unity, schism, Saint-Germain des Prés, Saint-Jacques de la Boucherie,—all are mingled, combined, amalgamated in Notre-Dame. This central mother church is, among the ancient churches of Paris, a sort of chimera; it has the head of one, the limbs of another, the haunches of another, something of all.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Notre_Dame_de_Paris_%281888%29_illustr.jpg/153px-Notre_Dame_de_Paris_%281888%29_illustr.jpg" alt="Notre-Dame des Paris" />
<p>We repeat it, these hybrid constructions are not the least interesting for the artist, for the antiquarian, for the historian. They make one feel to what a degree architecture is a primitive thing, by demonstrating (what is also demonstrated by the cyclopean vestiges, the pyramids of Egypt, the gigantic Hindoo pagodas) that the greatest products of architecture are less the works of individuals than of society; rather the offspring of a nation’s effort, than the inspired flash of a man of genius; the deposit left by a whole people; the heaps accumulated by centuries; the residue of successive evaporations of human society,—in a word, species of formations. Each wave of time contributes its alluvium, each race deposits its layer on the monument, each individual brings his stone. Thus do the beavers, thus do the bees, thus do men. The great symbol of architecture, Babel, is a hive...</p>
</div>
</body>
</html>Full text is provided for you to copy to your file and reproduce the results from the topic if you want.
Now it looks rather sloppy. It would be nice to place the images on the sides of the page so that the text flows around them. The float property will help us with that. Let's add the id attributes to images in HTML and matching styles to styles.css.
HTML:
<!-- the previous code -->
<img id="img1" src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Victor_Hugo-Hunchback.jpg" alt="Notre-Dame des Paris" style="height: 200px; width: 150px;" />
<!-- the code in the middle -->
<img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Notre_Dame_de_Paris_%281888%29_illustr.jpg/153px-Notre_Dame_de_Paris_%281888%29_illustr.jpg" alt="Notre-Dame des Paris" />
<!-- the following code -->CSS:
#img1 {
float: left;
}
#img2 {
float: right;
}The result is the following:
Looks better, although the second picture goes out of the border. We will discuss how to solve this problem later.
How does the float algorithm work? The floated element is "taken out" from the general sequence of page elements and shifted left or right according to the property value to the border of its parent element (in our case it is div with a black border) or to another floated element. Block elements of the page cease to notice the floated element and can intersect it, as it was with the bordered div in the example. Inline elements are shifted to flow around it.
Clearfix
Let's solve the problem with the second image. As we've mentioned above, the div has "forgotten" about this image and has not resized it properly. The most popular way to fix it is to add a special pseudo-element ::after to a parent. This invisible element becomes the last child of the parent, stands after the floated element, and sees it at the same time. So this element makes the parent end only after the floated element.
In HTML we add an id to the div:
<!-- the previous code -->
<div id="container" style="border: 1px solid black; padding: 5px; width: 900px;">
<!-- the following code -->In CSS we add the following style:
#container::after {
content: "";
display: block;
clear: both;
}
/* and other styles */Now, this piece of code is the most popular version of the clearfix. The content and display properties are specified because of the specifics of setting a pseudo-element. We should leave the content empty to avoid adding any extra details to the page. Also, we should change display: inline which is the default for ::after to display: block to embed the pseudo-element in the way we need.
And we get the new result:
It's fixed!
Clear
In the previous code modification clear has appeared in CSS, so let's talk about it. This property is used to turn off the floating effect. Suppose we want to enumerate paragraphs in our book. Add two <h3> to HTML:
<!-- the previous code -->
<body>
<div id="container" style="border: 1px solid black; padding: 5px; width: 900px;">
<h1>The Hunchback of Notre-Dame</h1>
<h3 style="background-color: blue;">Paragraph 1328</h3>
<p> ... </p>
<img id="img1" ... />
<p> ... </p>
<h3 style="background-color: blue;">Paragraph 1329</h3>
<img id="img2" ... />
<p> ... </p>
</div>
</body>
<!-- the following code -->The result will be the following:
This is not quite what we want. <h3> is a block element, so the second <h3> ignores the floated #img1 and partly stands behind it. But it would look nicer if the heading did not cross the image. And here we use one more clear in CSS:
h3 {
clear: both;
}It makes the <h3> move down until there aren't any floated elements left and right (or only left for clear: left, or only right for clear: right). So the page looks the following way:
The last issue is that the bottom of #img1 and the top of the second <h3> are glued to each other. We can't fix it by increasing margin-top for <h3>, because this margin-top is hidden behind #img1. Instead of it, we may paste <div style="clear:both"></div> before <h3> in HTML and get the following result:
The final HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="container" style="border: 1px solid black; padding: 5px; width: 900px;">
<h1>The Hunchback of Notre-Dame</h1>
<h3 style="background-color: blue;">Paragraph 1328</h3>
<p>... Notre-Dame de Paris is, in particular, a curious specimen of this variety. Each face, each stone of the venerable monument, is a page not only of the history of the country, but of the history of science and art as well. Thus, in order to indicate here only the principal details, while the little Red Door almost attains to the limits of the Gothic delicacy of the fifteenth century, the pillars of the nave, by their size and weight, go back to the Carlovingian Abbey of Saint-Germain-des-Prés.</p>
<img id="img1" src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Victor_Hugo-Hunchback.jpg" alt="Notre-Dame des Paris" style="height: 200px; width: 150px;" />
<p>One would suppose that six centuries separated these pillars from that door. There is no one, not even the hermetics, who does not find in the symbols of the grand portal a satisfactory compendium of their science, of which the Church of Saint-Jacques de la Boucherie was so complete a hieroglyph. Thus, the Roman abbey, the philosophers’ church, the Gothic art, Saxon art, the heavy, round pillar, which recalls Gregory VII., the hermetic symbolism, with which Nicolas Flamel played the prelude to Luther, papal unity, schism, Saint-Germain des Prés, Saint-Jacques de la Boucherie,—all are mingled, combined, amalgamated in Notre-Dame. This central mother church is, among the ancient churches of Paris, a sort of chimera; it has the head of one, the limbs of another, the haunches of another, something of all.</p>
<div style="clear:both"></div>
<h3 style="background-color: blue;">Paragraph 1329</h3>
<img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Notre_Dame_de_Paris_%281888%29_illustr.jpg/153px-Notre_Dame_de_Paris_%281888%29_illustr.jpg" alt="Notre-Dame des Paris" />
<p>We repeat it, these hybrid constructions are not the least interesting for the artist, for the antiquarian, for the historian. They make one feel to what a degree architecture is a primitive thing, by demonstrating (what is also demonstrated by the cyclopean vestiges, the pyramids of Egypt, the gigantic Hindoo pagodas) that the greatest products of architecture are less the works of individuals than of society; rather the offspring of a nation’s effort, than the inspired flash of a man of genius; the deposit left by a whole people; the heaps accumulated by centuries; the residue of successive evaporations of human society,—in a word, species of formations. Each wave of time contributes its alluvium, each race deposits its layer on the monument, each individual brings his stone. Thus do the beavers, thus do the bees, thus do men. The great symbol of architecture, Babel, is a hive...</p>
</div>
</body>
</html>Conclusion
In this topic, we've created a page with paragraphed text and illustrations. Of course, for a better result we can style it even more, but even at this point our page looks quite readable. So the float and clear properties are definitely worth remembering.