Learning to build layouts with floats

Any modern website built consist of complex layouts. For better content representation one needs to use column-based layouts. This can be done in multiple ways, it can be done through “inline-block”, “flex”, “grid” or even using “floats”. Though modern websites have moved towards “flexbox” and “grid”, “float” method for making layouts has its own legacy. It formed the basis of making a good looking website. Let’s explore what the “float” is.

Float is a CSS property that places an element either on the left or right side of the container. This allows the content/text to wrap around the element floated. Also, the element floated comes out of the normal flow of the page. This in all likelihood creates an issue while building the layout.

Float property accepts 3 values. It can either accept values as left, right or none. By default, all of the elements in HTML are floated none that is {float:none}. For floating an element on right we use the following CSS rule set {float:right}. This will cause the element to float right on the container. Let’s use the float property to make our basic navigation.

In “style.css” below the “CSS resets” write the following line of code this will create basic navigation layout all aligned to the left.

Now our goal is to align the navigation links that are “Home”, “Profile”, “About” & “Contact” be aligned to the right. There comes the use of “float”. Let’s use “float: left” for the “logo” class and “float: right” in our HTML. Let’s check the output.

In the output, we can see that the logo content comes out. This is the caveat of “float”. When “float:left” & “float:right” are used the parent element gets the height of 0px. This anomaly makes float almost non-usable for layouts. This issue can be solved by either using “empty-div” technique, “overflow” technique or “clearfix” technique. These approaches mentioned are also called as containing the floats. Let’s solve this problem by using “clearfix” technique.

In this technique, we apply “clearfix” class to the parent div in which the children elements are floated. Also pseudoelements ::after and ::before are to be used in CSS to contain the float. Just add the below block of code between “Typography section” and “Header section”.

Also we need to make changes in our HTML “index.html” file. We need to apply “clearfix” class to the immediate parent of the floated elements. In this case in our “index.html” we need to apply it on “nav” tag besides “navigation” class.

This looks somewhat cool, with “logo” aligned to left and “navigation” aligned to right. Now, let’s add the “hero” section within the “main” tag. The “main” tag has to be placed below <header> tags.

In “style.css” under “topography section” write style for h2 tag. Also, create a “hero section” under the “header section” of “style.css”.

Now let’s make 3 columns using floats. Let’s create “section” tag with class-name primary. Each of the columns would have the class-name “col”. Let’s make some changes in “Typography section” in “style.css”. Add h3, h5 tags. Also add “Primary section” below the “hero section” in “style.css”. Similarly in “index.html” create a “primary section”.

The output for the above code would be our full-blown layout with 3 columns.

Now our website seems to look cool. This was the simple layout we have built using the floats. In future we will learn to build the layouts using “flexbox” and “grid”.

Related posts:

The spectacular innovation and update in the most innovative NFT marketplace which is NFTrade that we have all been waiting for has been lunched. Having gone through the new features been launched in…

The current version of the Medium iOS app does not allow for code blocks. I will not be buying a desktop computer to write on this platform, so my code blocks will be presented as quotes. Looks like…

Take some time off and go someplace new. Do it alone. Solitude will help bring your thoughts in order and focus on issues that really concern you and only you. Being gone from the home city will…