An old-timey web dev tutorial (and a friendly intro to CSS layouts)
Over the last few chapters, we’ve learned how to manipulate the size of boxes and the space around them, but for the most part, we were stuck with the default vertical flow of the page. Block elements always appeared vertically one after another, effectively limiting us to a single-column layout.
“Floats” let you put block-level elements side-by-side instead of on top of each other. This is a big deal. It lets us build all sorts of layouts, including sidebars, multi-column pages, grids, and magazine-style articles with text flowing around an image. This is where we finally start creating real web pages.
Float-based layouts have mostly been replaced with Flexbox in modern websites. But, that’s not to say this chapter isn’t worth reading. For over a decade, floats served as the foundation for the majority of websites on the Internet, which means you’ll definitely encounter them at some point in your career.
Perhaps more importantly, the limited nature of floats makes them a gentler introduction to CSS layouts than Flexbox. Instead of being overwhelmed with all the possibilities of Flexbox, we’ll get a chance to focus more on the process of building up a sophisticated web page layout.
Setup
This chapter demonstrates CSS floats with a pretty simple sample project. Instead of working with proper HTML content as we have been in previous chapters, we’ll be styling a bunch of empty <div> elements. We’ll end up with something that looks like the following, which is a pretty big divergence from the types of web pages we’ve been creating thus far.
First, create a new folder called floats, then add a new web page called floats.html with the following markup:
This gives us the basic structure for most websites on the Internet. We have a place to put a navigation menu, a sidebar, the main content of the page, and a footer. Think of all these as container divs that you can put your actual HTML content into.
You won’t see much when you open floats.html in a browser because empty elements have zero height. We’ll fix this in the next section.
Floats alter the default layout of a web page, so we should probably start by reviewing what exactly that “default” behavior is. We introduced this in block elements versus inline elements, but it’s about to become much more important.
We can get a better look at our example page by adding some background colors and explicit heights to each of our <div> elements. Add this to styles.css:
This gives us a nice rainbow, which isn’t what we’re looking for, though it does demonstrate some useful concepts.
The important part here is that each block-level element fills 100% of its parent elements’s width (<div class='page'> in this case), and they appear vertically one after another. Again, we’re essentially limited to a single-column layout.
Typically, you’d want to let the height of these boxes be determined automatically based on the content they contain; however, we’re more concerned with controlling layouts this chapter, so we won’t be dealing with much real content. This is why we need the explicit height properties.
It’s worth taking a look at what happens when we shrink an element’s width. Update our .sidebar rule to match the following:
The sidebar element gets narrower, but the rest of the boxes stay in the exact same position. All the blocks are still rendered vertically one after another. This is the behavior we’ll be changing with floats.
Floating an Element
The CSS float property gives us control over the horizontal position of an element. By “floating” the sidebar to the left, we’re telling the browser to align it to the left side of the page. Go ahead and float our sidebar with the following line:
However, this doesn’t just align the sidebar—it also tells surrounding elements that they can flow around the sidebar instead of beginning underneath it. It’s as if the sidebar is inside the .content block, so any HTML markup in .content would wrap around the sidebar’s box. This gives us a magazine-style layout:
You can also float elements right, as shown below (let’s keep our sidebar floated left though). Or, if you’re overriding a float declaration, you can cancel it with the none value. These are the most common values for the float property.
We now have all the tools necessary to align block-level elements: floats for left/right alignment and auto-margins for center alignment. Remember that this only applies to block boxes. Inline boxes are aligned with the text-align property, as discussed in the previous chapter.
Floating Inside of Parents
Floated boxes always align to the left or right of their parent element. In our example, the sidebar’s parent is <div class='page'>, which is as wide as the browser window. This is why our sidebar floats to the far left of the page.
Let’s change this by giving our page a fixed-width layout. Once again, the auto-margin centering technique comes in handy. Add this to styles.css:
.page {
width: 900px;
margin: 0 auto;
}
Now, we can see that .sidebar floats to the left of the .page container, opposed to the edge of the browser window.
Positioning nested container divs like this is how you build up sophisticated website layouts. Here, we started with .page to center everything, then we left-aligned a sidebar inside that centered page. Things can get way more complex, but our simple example demonstrates the universal truth of CSS layouts: everything is a box inside of a box inside of another box.
Multiple Floats
Let’s examine our current magazine-style float a little bit more by adding an explicit width to our .content block:
This clearly demonstrates that our sidebar is in fact inside the .content block: if you take a screenshot of them, you’ll have an image that’s 650 pixels wide opposed to 850 pixels (our sidebar is 200 pixels wide).
This kind of float behavior is nice for images (which we’ll see later on), but for page layout, we actually want the content block to be next to the sidebar instead of flowing around it. For this, we need to tell the content block to float left, too. Add one more line to the .content rule:
When you float multiple elements in the same direction, they’ll stack horizontally, much like the default vertical layout algorithm, except rotated 90 degrees. The above code causes our entire content block to appear on the right of the sidebar instead of wrapping around it.
This gives us true control over the horizontal alignment of our block boxes. Try playing with the float values for both .sidebar and .content, and you’ll find that we already have a couple of distinct layouts at our disposal:
Make sure both of them are floating left before moving on. That takes care of the layout for the sidebar and content blocks, but it unfortunately messed up our .footer element…
After a Float
You probably noticed that our footer shows up in the top right, directly below .menu. That’s because floated boxes are removed from the normal flow of the page. The height of our floated elements don’t contribute to the vertical position of the footer, so it simply sticks itself below the last element that wasn’t floated.
We can see this more clearly by adding a red border around our .page element:
Notice how the border is only around the .menu and .footer elements. It’s as if the floated elements weren’t even there. There are two ways to fix this: clearing a float and hiding overflow.
Clearing Floats
“Clearing” a float is when we tell a block to ignore any floats that appear before it. Instead of flowing around the floated box, a cleared element always appears after any floats. It’s 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:
Usually, you want to clear both left and right floats as we did here, but you can choose to clear only one or the other with the left or right values. Note that the red border now wraps all the way around the footer, indicating that the floated elements indeed count towards the height of the .page container:
Depending on the type of layout you’re trying to create, this is a perfectly acceptable solution. We could stop here, but we’re going to explore float behavior more by transforming our page into a full-bleed layout that has background colors filling the entire browser window.
Watch what happens when we take the menu and footer out of the .page element. Change the <body> element to match the following:
Since .menu and .footer are outside our fixed-width .page, they’re the full width of the window, which is exactly what we want for a full-bleed layout. However, notice how .page has zero height again despite the fact that the footer still clears the sidebar and content blocks.
Once again, the only elements in .page are floated, so they don’t count towards its height. In other words, moving the footer outside of the .page container broke our clear fix.
Hiding Overflow
Clearing floats only fixes the height issue when there’s an element inside the container element that we can add a clear property to. Now that our footer is outside .page, we need a new way to make floated elements contribute to the height of their container.
The solution is the CSS overflow property. By adding an overflow: hidden declaration to a container div, we’re telling it to recognize the height of any floated elements it contains. This is how we can add a background color to our .page element and have it actually render:
.page {
width: 900px;
margin: 0 auto;
overflow: hidden; /* Add this */background-color: #EAEDF0; /* Add this */
}
You should now be able to see a light gray background in .page instead of the default white. This isn’t full bleed yet (we’ll address that in the next section). The important part here is the behavior of overflow: hidden. Without it, we wouldn’t be able to see the .page container’s background because it would have zero height.
To summarize, when you have an extra unfloated HTML element at the bottom of a container div, use the clear solution. Otherwise, add an overflow: hidden declaration to the container element. The underlying idea for both options is that you need a way to tell the browser to incorporate floats into the height of their container element in order for their backgrounds to show up.
Full-Bleed Layouts
Next, we want to make our .page background fill the entire browser window without changing the alignment of our sidebar or content blocks. The problem is, our .page is busy centering everything—we can’t use it for a full-bleed background because centering requires an explicit width property.
It’s time for another container div. Putting a box around .page lets it continue centering stuff while giving us a place to define a background-color property. Change our <body> element to match the following:
<body><divclass='menu'>Menu</div><divclass='container'><!-- Add this --><divclass='page'><divclass='sidebar'>Sidebar</div><divclass='content'>Content</div></div></div><!-- Add this --><divclass='footer'>Footer</div></body>
Remember that the default block-rendering behavior is for elements to fill the width of their container. So, we should be able to move our background-color declaration to a .container rule to get a full-bleed background:
As in the previous section, we still need the overflow: hidden line to force the .container to pay attention to the height of the floated elements. Without it, we wouldn’t see our background color because .container would have zero height.
This gives us three nested <div> elements just for laying out our page: a .container wrapper for full-bleed background color, a fixed-width .page for centering everything, and finally left-aligned .sidebar and .content blocks. This kind of nesting and aligning is pretty typical of most website layouts.
Floats for Equal-Width Columns
So far, we’ve seen a sidebar layout, a fixed-width layout, and a full-bleed layout. Floats can also be used to create multi-column layouts. This works just like our .sidebar and .content floats—we just have more of them.
Next we’re going to add three equal-width columns to our footer. Update the <footer> element, like so:
We can style each of these columns just like we laid out the rest of our page. Add a new rule to styles.css:
.column {
float: left;
width: 31%;
margin: 20px1.15%;
height: 160px;
background-color: #B2D6FF; /* Medium blue */
}
This is the first time we’ve used percentage values instead of explicit pixel values. Percentages in CSS are relative to the width of the parent element. The result is three columns that automatically resize to one-third of the browser window. Resize the browser window, and you’ll see our columns grow and shrink accordingly. This is the beginning of responsive design.
Anyhoo, let’s not lose sight of the central thesis of this chapter: floats let us stack things horizontally instead of vertically. By changing the widths of the elements we’re floating, we can get all kinds of different layouts, from sidebars to multiple columns to grids.
Floats for Grids
Want a grid in the footer instead of 3 columns? No problem! When there isn’t enough room to stack a floated element horizontally, it pops down to the next line. All we need to do is add some more .column elements:
Our footer background is too short. Fortunately, we already know how to fix that. Let’s replace the footer’s explicit height with another overflow: hidden so it can accommodate any number of grid items:
You can use this same technique to make grids of any size. For example, creating a photo gallery with a bunch of thumbnails is simply a matter of putting the grid items in .page instead of the footer and adding <img/> elements to them. But, again, remember that flexbox is a more modern way to create these kinds of layouts.
A Brief Note on Naming Conventions
The .column class name isn’t exactly accurate anymore. This scenario is a good example of why we want to avoid class names that refer to appearance. “Column” isn’t so great because the content it contains doesn’t necessarily need to be rendered in multiple columns (e.g., for a mobile layout, there would likely only be one column). A better name would be something like .footer-item, but we’ll leave that for you to fix.
Floats for Content
There’s two aspects to defining a web page layout. You have your overall page structure, which we’ve been working on throughout this entire chapter. This is stuff like where you sidebar goes, how big your navigation menu is, etc. The other aspect of layouts is styling the individual HTML components (your actual content) that go inside this overarching page structure.
The process for the latter is the same, it’s just nested inside the former. Let’s add some dummy content to our .content element so we have something to play with:
<divclass='container'><divclass='page'><divclass='sidebar'></div><divclass='content'><imgsrc='?'class='article-image'/><p>Ad netus sagittis velit orci est non ut urna taciti metus donec magnis
hendrerit adipiscing mauris sit a proin ultrices nibh.</p><p>Enim suspendisse ac scelerisque nascetur vestibulum parturient sed mi a
dolor eu non adipiscing non neque scelerisque netus ullamcorper sed
parturient integer.Eros dui risus non sodales ullamcorper libero a dis
cubilia a orci iaculis cursus.</p><p>Egestas at aliquam a egestas accumsan cum elementum consectetur conubia
tristique eu et vitae condimentum in ante consectetur suscipit a a duis
vestibulum gravida morbi sagittis.Parturient scelerisque facilisis
ullamcorper a a pretium a nisl parturient semper senectus accumsan ipsum
mus scelerisque eget ridiculus.Accumsan dolor a.</p><p>Ligula taciti vel primis sit a tincidunt habitant parturient parturient
in parturient ante nulla consectetur sem.Facilisis parturient litora.</p></div></div></div>
We’ve got an image and several paragraphs that we can style just like our structural divs. For example, let’s create a magazine-style layout by floating the image and letting the text flow around it. Add a couple more rules to our stylesheet:
Notice how we have a float inside of a float, and everything works just fine. Laying out a website is a recursive process: you build a high-level structure to work in, then you fill it with your actual content. More complex layouts may need another layer or two of nesting, but the idea is the same.
Hiding Overflow (For Content)
You’ll find examples of nested layouts all over the place. For our final example, consider a basic user-comment thread. You have an image that’s floated left with a heading and some text next to it:
Let’s try creating this in our footer. In your favorite .column element, add the following:
<divclass='column'><divclass='avatar'></div><h3class='username'>Bob Smith</h3><pclass='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>
This highlights another use case for our overflow: hidden trick. Sticking it on our .comment box made sure that the text “horizontally cleared” (that’s not a technical term) the floated image. Without it, the last line of the .comment text would hang underneath the image.
In other words, overflow: hidden breaks the magazine-style layout from the previous section, but in a very useful way.
Summary
This chapter was our first encounter with realistic web page layouts. We learned how to float divs to the left and right, how to deal with content after a float, and how to combine floats with the auto-margin centering technique from the CSS Box Model chapter. These are the tools we need to create sidebars, grids, an magazine-style layouts.
It’s important not to lose sight of the developer’s role in the website creation process. Your job as a web developer is to take a beautifully designed mockup and turn it into the HTML and CSS that browsers can display to your end users. Floats are a big leap forward towards that end, but they’re also becoming obsolete in favor of the flexbox layout scheme.
In the next chapter, we’ll learn even more ways to lay out complex websites using flexbox. The CSS properties will be new, but the process will be the same as it was in this chapter: we’ll still be aligning boxes inside of other boxes, inside of other boxes, and so on until we accomplish the desired layout.
