Responsive-Web Design: flow of the page.

Question

I've been going through a tutorial on CSS and on the Responsive Web Design section, the author wrote something I was not able to follow. What is the purpose of this section in the code:

.row:after {
    content: "";
    clear: both;
    display: block;
}

The author says "The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns does not exist. To prevent this, we will add a style that clears the flow"

I'm not exactly sure how the above style accomplishes this. Below is the full code.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">

<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.    </p>
</div>

</div>
</body>
</html>

I already read the content property in CSS question asked on this website already, but everything still seemed unclear.

score 1 · Accepted Answer · edited Jun 30 '15 at 03:01

1

It's called CSS Clearfix. it's a fix when floating elements, they no longer have a width (to make them float), and therefore elements after them are pushing up.

So someone invented the 'clearfix hack', to force elements to clear. Chris Coyier has a really good article about that in CSS-TRICKS:

https://css-tricks.com/snippets/css/clear-fix/

If you want to REALLY do RWD (responsive web design) and become a web designer, this is one of the basics that you would have to learn.

edited Jun 30 '15 at 03:01

BoltClock

700,868
160
1,392
1,356

answered Jun 29 '15 at 19:54

user3522940

1,013
2
10
14

what do you mean when you say "they no longer have a width (to make them float), and therefore elements after them are pushing up." – Rockstar5645 Jun 29 '15 at 19:58
Does all responsive design imply the use of floats or is the inline-block display a viable alternative ? That said floated elements still have a width, they're just taken out of the usual flow. – Laurent S. Jun 29 '15 at 19:58
they no longer have a height that is taken into account when calculating the height of the parent - which in turn causes the parent to collapse if all the children are being floated, to be precise, often we use floats to force a width, which is a bit hacky – Toni Leigh Jun 29 '15 at 20:10
Any reason why you formatted your entire answer with big bold text? Please don't do this again. – BoltClock Jun 30 '15 at 03:01

score 1 · Answer 2 · answered Jun 29 '15 at 19:54

The author is using a clear fix.

A clear fix is a hack designed to stop floated elements from causing the collapse of the parent element which happens if all children are floated. Technically speaking a float is a not a layout property, it's for positioning things within text in such a way as to make the text flow around them, much like you might see in a printed article. It is used as a layout property in css however because it applies to any element and developers are ingenious beings.

The specific clear fix hack you cite is discussed in more detail here and another example using table display is here

'Removed from the flow of the document' means the elements aren't taken into account when calculating parent element dimensions (amongst other things)

Responsive-Web Design: flow of the page.

2 Answers2