Avoid the Dreaded and Outdated Float Attribute!

Use More Modern Methods for Much Cleaner Effects

If you’ve dipped your toe into working with HTML and CSS, you’ve likely seen the dreaded “float” attribute. Essentially, this allows elements like divs to move to different parts of the screen, as opposed to the default left-side alignment. In theory, a handy effect! In practice, float commonly causes all kinds of layout issues and pushes other elements around in unpredictable ways. Float is one of the older attributes in CSS, so it can be forgiven some. But some people still insist on using it, even though much more modern and effective methods have been created. Find out how you can avoid using the outdated float below!

Use auto margins for single items

Let’s you’re trying to align a single item, like a div or an image, to the right side of the screen. This is easily achievable using the handy margin attribute. First, be sure to give the element a width: this can be exact pixels, like 500px, or a proportiante measurement like 50%. Setting the width to auto is another potential good option, as it sets the width only as wide as is required to fit the contents. As long as the width is not 100%, then you can adjust the alignment.

Also make sure the display attribute is set to block. This is the default, but if it’s been overridden then the margin may not act as expected.

With a set width and display set to block, then we can use our margin attribute to force the element to align to the other side of the screen. All you have to do is set the margin-left attribute to auto, and the browser will automatically calculate how much margin can be given on the left side, pushing the element all the way to the right. You can still give the element some margin-right as well, if you don’t want it to be flush with the side of the screen.

Use inline-block for simple cases

One of the other nice things about float is that it allows you to display items next to each other in a row. Yet this feature isn’t restricted to this outdated attribute. Let’s say you wanted to have two elements, each able to take up half of the screen but appear in a row. All you have to do is give each element or container a width of 50%, and then set the display attribute to inline-block. This way, each element still gets its own “block” to itself, but that block doesn’t take up the full width of the screen as it does with the default block value.

An important note here is that automatic calculations, like for width and margins, won’t work with the inline-block display value. You’ll have to set your widths manually, but this also allows for much more control. You can do thirds, or fourths, fifths, sixths, whatever you want!

Another handy tip here to work smarter instead of harder is the “calc” operator, particularly for the width attribute. If you don’t want each item to be flush with each other, you’ll want to give the items a margin. Something like margin: 0 20px; will give each item that’s displaying inline-block a little breathing room. Then, you can set the width using a declaration like width: calc(50% – 40px). This will calculate the width of the element to be half the available area, minus the 40px on each side from the margin. Since percentages don’t always end up as whole pixel values, don’t worry if you need to give them a little extra space (like 50% minus 42px, for example).

Hook into the power of display: flex

The newest, and most expansive way to get all the same effects as float is through the display value of “flex.” This powerful value hooks you into an expansive array of sub-attributes: direction, wrap, basis – the ability to justify self, align all items, align just the content, and more. The flex value for display could have a blog post all to itself with the deep capabilities of the toolkit.

Simply wrap the element(s) you want to align inside a new div, and set that div to display: flex. From there, you can achieve the same alignment capabilities by using either align-items or justify-self. And you can allow things to display next to each other just by using the default display: flex, with flex-direction: row and flex-wrap: wrap (and setting the width of the elements inside the container that is displaying flex).

Need help putting together your own custom layout? Don’t hesitate to reach out to us at Mr. WPress for a free quote! We’re always happy to help clients put together high-performing, high-quality, and engaging websites.