How I Created This Responsive Web Design Using Floats

Unpopular Opinion: Floats aren’t all that bad.

I mean, sure, they don’t do everything that Flexbox and Grid can do, but you can still create some pretty nice designs with Floats. Just like Flexbox and Grid, Floats can be used to create this 2 x 2 grid:

And it can be used to change that grid into a simple vertical mobile layout:

To start, we’re going to need some html and images to get us started. For this layout, I took a couple of pictures of two of my plants with an aspect ratio of 4:3 (this becomes important when the height of the text cards needs to be defined). The html itself is fairly simple, making use of a figure tag for both images, and an h2, paragraph, and anchor tag in each of the text cards.

For the css, I started off with some basic typographical styling for the text cards, adding colours and fonts, as well as some margin and padding. To create the layout of the 2 x 2 grid, I gave the .card class a width of 50% and to float the cards beside each other, I gave the float property a value of “left.” After floating all of the cards to the left, I floated the first card to the right to have it appear after the first text card.

If you were to test the project now, you would see four cards laid out in the pattern above, in the first image, but with one noticeable difference: the text cards are shorter than the images! This means that we have to define a height for our text cards. However, we can’t use a fixed height because as the screen’s size changes, our images’ sizes change too. So our text cards need to have a height that is also dynamic, and needs to stay the same as the height of the image cards.

So I decided to do a little math. Remember how I said that the images have an aspect ratio of 4:3? This is where that ratio becomes important. In order to create a dynamic height for our text cards, we’ll need this ratio as well as the wonderful calc() function.

What I did, was multiply the width of the screen that each card was occupying (50%, or 50vw) by the height ratio of the image (3). Then I divided that value by the width ratio of the image (4). Now both of the text cards have a height that changes dynamically to match the height of the images!

Step one done! Now to build the vertical layout. For the purposes of this blog post, I decided not to change the size of the elements within the text card, so I am only using one media query set at a max-width of 967 pixels. This media query will allow our design to switch from our 2 x 2 desktop grid to the vertical layout more common on mobile devices.

The first thing I did inside of the media query was change the width of all of the cards back to 100%. This will push the first image on top of the first text card without changing our float property to a value of none because the image is first in the stacking order of our html. I then aligned the text in the text cards to the centre of the screen and changed their height back to auto. This will eliminate the possibility of overflow from the paragraph, so the text won’t hide behind the image underneath it. As an extra step, I wanted to change the height of the images so they wouldn’t take up as much space, causing the user to scroll more than necessary. So I used my favourite calc() function and defined the height of the figure elements holding the images as being half of the width of the screen. For the same reason I changed the height of the text cards to auto, I changed the overflow property on the figure element to hidden, so the images wouldn’t hide any of the text.

And there you have it! A dynamic web design using nothing but floats.

Would you have done it differently? Let me know in the comments!