Floats
By default, block elements always appear vertically one after another, effectively limiting us to a single–column layout.
“Floats” allow us to put block–level elements side–by–side instead of on top of each other. This is where we finally start creating real web pages.
Although floats served for over a decade as the foundation for the majority of websites on the Internet, in modern websites float–based layouts have mostly been replaced with Flexbox.
However, the limited nature of floats makes them a gentler introduction to "CSS layouts" than Flexbox; thus, allowing us to focus more on the "process" of building up a sophisticated web page layout.
Default HTML Layout Behaviour:
The default layout of a web page is that each block–level element fills 100% of its parent elements's width, and they appear vertically one after another, agian, limiting us to a single–column layout.
Floating an Element:
The CSS float property gives us control over the "horizontal" position of an element. By “floating” a sidebar, for example, to the left, we are telling the browser to align it to the left side of the page, like this:
.sidebar {
float: left;
}
Floating the sidebar also tells the surrounding elements that they can flow "around" it instead of beginning "underneath" it.
We can also float elements right, or override a float declaration by cancelling it with the none value.
We now have all the tools necessary to align block–level elements:
- Floats for left/right alignment.
- Auto–margins for center alignment.
Inline boxes are aligned using the text–align property.
Floating Inside of Parent Elements:
Floated boxes always align to the left or right of their parent element.
Multiple Floats:
When we float multiple elements in the same direction, they will stack horizontally.
This gives us true control over the "horizontal" alignment of our block boxes.
If we would play with the float values for two elements such as a "sidebar" and a "content", we will find that we already have a couple of distinct layouts at our disposal:
After a Float:
Suppose we have three elements, a sidebar, a content element, and a footer element. If we float the first two elements, i.e. the sidebar and the content element, they will be removed from the normal flow of the page, and their height will not contribute to the vertical position of the third element that is the footer, so that it will simply stick itself below the last element that was not floated, like shown in the following figure:
There are two ways to fix this:
- Clearing a float.
- Hiding overflow.
Clearing Floats:
“Clearing” a float is when we tell a block to ignore any floats that appear before it.
Thus, instead of flowing around the floated box, a cleared element always appears "after" any floats. It is like forcing a box back into the default vertical flow of the page.
We can use the clear property to make our footer drop down to the bottom of the page:
.footer {
clear: both;
}
Usually, we would want to clear both left and right floats as we did in the above–mentioned code, but we can choose to clear only one or the other with the left or right values.
Hiding Overflow:
By adding an overflow: hidden rule to a container div, for example, we are telling it to recognize the height of any floated elements it contains.
Without overflow: hidden we would not be able to apply a background colour to a <div> container because it would have zero height.
We need a way to tell the web browser to incorporate floats into the height of their container element in order for their backgrounds to show up. Thus, when you have an extra unfloated HTML element at the bottom of a container div, use the clear solution. Otherwise, add an overflow: hidden rule to the container element.
Floats for Equal–Width Columns:
Floats can also be used to create multi–column layouts.
Floats let us stack things horizontally instead of vertically. By changing the widths of the elements we are floating, we can get all kinds of different layouts, from sidebars to multiple columns to grids.
Floats for Grids:
Want a grid for creating a photo gallery with a bunch of thumbnails ?
No problem! When there is not enough room to stack a floated element horizontally, it pops down to the next line.
Add the following code to your HTML file:
<div class="gallery">
<div class="gallery_item"><img></div>
<div class="gallery_item"><img></div>
<div class="gallery_item"><img></div>
<div class="gallery_item"><img></div>
<div class="gallery_item"><img></div>
<div class="gallery_item"><img></div>
</div>
Then add the following CSS rules to your stylesheet:
.gallery {
overflow: hidden;
}
.gallery_item {
float: left;
width: 31%;
height: 160px;
margin: 20px 1.15%;
}
Note that percentages in CSS are relative to the width of the parent element.
Floats for Content:
There are two aspects to defining a web page layout:
- Having your overall page structure, like where you sidebar goes, how big your navigation menu is, etc.
- Styling the individual HTML components (the actual content) that go inside this overarching page structure.
Hiding Overflow (For Content):
Consider a basic user–comment thread. You have an image that is floated left with a heading and some text next to it, like this:
Let us try creating this. Add the following code to your HTML file:
<div class="column">
<div class="avatar"></div>
<h3 class="username">Bob Smith</h3>
<p class="comment">>Aptent vel egestas vestibulum aliquam ullamcorper volutpat ullamcorper pharetra hac posuere a rhoncus purus molestie torquent. Scelerisque purus cursus dictum ornare a phasellus. A augue venenatis adipiscing.</p>
</div>
Then add the following CSS declarations to your stylesheet:
.avatar {
float: left;
width: 60px;
height: 60px;
margin: 25px;
border–radius: 40px;
background–color: #d6e9fe;
}
.username {
margin–top: 30px;
}
.comment {
margin: 10px;
overflow: hidden; /* This is important */
}
The previous CSS code highlights another use for our overflow: hidden rule:
Applying this CSS rule to our "comment" element made sure that the text “horizontally cleared” the floated image (the avatar element). Without using this rule, the last line of the "comment" text would hang underneath the image, like this:
Summary:
The web developer's role in the website creation process is to take a beautifully designed mockup and turn it into the HTML and CSS that browsers can display to your end users.
Although "floats" have been a big leap forward towards that end, they are becoming obsolete in favour of the "flexbox" layout scheme.
The process of laying out complex websites is about aligning boxes inside of other boxes, inside of other boxes, and so on until we accomplish the desired layout.