The matters of content layouts in web design can be a confusing concept at first glance. Learning about the CSS Float concept on its own can be a bit of a hurdle to tackle. However, sometimes it is easier to grasp the ideas at play when you can see examples of what the end goal could be on the HTML page.
In this brief tutorial, you will see a few basic CSS float layout examples to help show those concepts in action. This will help make the property values like “float left” and “clear” make a bit more sense than just by code alone.
The CSS Float Property and Values
Before you get to the examples, a brief refresher on the values of the float property can help put the content into perspective use.
Remember that the float property works by controlling or altering the flow of elements in relation to another. The often used need for this is the simple act of wrapping images or text around each other so their positioning looks right on the page.
The CSS float property can take the following values:
- none: This is the default value selected. No float directions are provided in relation to the element.
- left: The target element is directed to float on the left of its container.
- right: The target element is directed to float on the right of its container.
- inherit: The target element takes the applied float value of its parent.
The CSS Clear Property
The CSS clear property is not a float action, but it does deal with them very prominently. When a float direction is applied, the empty space left over in that direction is ready for the next element to take over if it can. This can lead to some oddities in appearance.
The CSS clear property simply directs the elements to not take that chance. Instead they follow the layout and move to the next clear area. The clear property can take the following values.
- none: No clearing property is set, the default property setting.
- left: Floating elements are not allowed to take the space left on the left side.
- right: Floating elements are not allowed to take the space left on the right side.
- both: Floating elements are not allowed to take space on either left or right sides.
- inherit: The clear value of the parent is used.
With those basics out of the way, you can get to the visual examples.
CSS Float Layout Examples: Floating Lists
In this example you will see how floating a simple list can make a huge impact in the visual outcome. To get started, take a look at the sample HTML code below.
<body> <h2>Check out this list. No floats applied.</h2> <hr> <h4>Fun things to eat.</h4> <ul> <li>Oranges</li> <li>Bananas</li> <li>Cookies</li> <li>Cake</li> </ul> </body>
This simple code will output a list onto the HTML page that looks like this.
Now, with the list in place you can go in and add a CSS float effect to change how it appears. In the sample CSS code below, the simple effect of float left is added.
li {
float: left;
}This will provide the following output on the HTML page.
Right away, you can notice that the list seems to be compact and close together. This simply won’t work. Thankfully, there are ways to correct this issue. You could think of using the clear property and apply the “left” value to it. However, this would just put the list back to the original standing.
Instead, adding a bit of CSS to the list element can help solve the issue. In the sample CSS code below, a border and background styling was added to help separate the list contents. A bit of padding and font coloring was thrown in to add a bit more flair to the example.
li {
list-style: none;
float: left;
border-style: solid;
border-color: black;
background: linear-gradient(to right, #a8c0ff, #3f2b96);
color: white;
padding: 10px;
}This will take the list and turn it into the following output.
CSS Float Layout Examples: Floating Divs
In this next example, you will have 3 simple divs. Each will have its own respective elements within. One will be purely text while the others will contain a heading and an image. Id tags have been added to the divs for ease of styling as well. The sample HTML code below is the base setup.
<body> <h2>A story of three div containers.</h2> <hr> <div id=set1> <h2>Sam the Wacky Cloud</h2> </div> <div id=set2> <p>There was once a cloud named Sam.</p> <p>What a wacky character he was!</p> <p>Such a nut he was!</p> <p>He would clown around until he was all rained out.</p> </div> <div id=set3> <h4>This is wacky Sam.</h4> <img src="doodle.jpg"> </div> </body>
With no CSS work applied, you will receive the following output on the page.
In this example you will see how the float and clear properties can help you to align elements on the page. Consider if you wanted to take elements of this page and align them for use in an article style. Right away, you may think of having the image align with the text or around it.
When you decide to float an element, you need to consider it’s relation to other elements on the page. Here a simple float left is applied to the second div.
#set2{
float: left;
}This gives the following page output.
The content from the second div has indeed floated left. This has left the space to the right open for the following 3rd div to occupy. As it stands, this comes across with an odd look as the divs do not seem to align properly.
Adding padding and box-sizing properties can do some good for that effect to clear. See the sample code below.
#set1{
text-align: center;
}
#set2{
float: left;
padding: 30px;
}
#set3{
box-sizing: content-box;
padding: 30px;
}This results in the following output on the HTML page.
However, there is an inherent issue present with this design. Take a look at what happens when the HTML window is resized by the end user.
As you can see, the styling effects are still there, but the resizing of the window has caused them to become distorted in the process. This shows the issue with relying simply on the use of floats for a design. While it is possible to only use floats for a full layout, it can come with pitfalls like this. Unless you know with 100 percent clarity what size the UI will be at all times, you might see this problem yourself.
Putting Flexbox to Use
One way to clear this issue with relative ease is to use flexbox. Flexbox is a tool that allows you to control the content spacing on a page and provides a form flexibility to the design, hence the naming. With flexbox, a container is created to store your elements. This container can then “flex” as needed by expanding or shrinking to accommodate the changes made in content or spacing.
In the sample HTML code below, a new div has been added to contain both div id 1 and 2. This new div is created as a class titled “flexItems” right above the second div.
<body> <h2>A story of three div containers.</h2> <hr> <div id=set1> <h2>Sam the Wacky Cloud</h2> </div> <div class=flexItems> <div id=set2> <p>There was once a cloud named Sam.</p> <p>What a wacky character he was!</p> <p>Such a nut he was!</p> <p>He would clown around until he was all rained out.</p> </div> <div id=set3> <h4>This is wacky Sam.</h4> <img src="doodle.jpg"> </div> </div> </body>
Now, both div id’s set 2 and set 3 are contained within the flexItems div. Moving to the CSS you can apply styling to the container itself which will affect both divs within it.
.flexItems{
display: flex;
background-color: whitesmoke;
}This tells the browser that the elements inside flexItems are to be displayed with the flex layout. A background color was added to display where the flex container is on the example.
To ensure that the two divs within the container have some breathing room, a bit of padding was also added in.
#set2, #set3{ padding: 10px; }
Combined, this will give you the following output on the page.
The great thing about the flexbox approach is that the container will automatically resize as needed. Now, if the user changes the window size, the elements of the container will try to match the available space.
Even though the window size was reduced as with the previous example, the container did its work and ensured the contained elements remained in the intended style applied.
Here is the final HTML and CSS code used in the examples:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Float Examples</title> <link rel="stylesheet" href="CSSFloatExamples.CSS"> </head> <body> <h2>A story of three div containers.</h2> <hr> <div id=set1> <h2>Sam the Wacky Cloud</h2> </div> <div class=flexItems> <div id=set2> <p>There was once a cloud named Sam.</p> <p>What a wacky character he was!</p> <p>Such a nut he was!</p> <p>He would clown around until he was all rained out.</p> </div> <div id=set3> <h4>This is wacky Sam.</h4> <img src="doodle.jpg"> </div> </div> </body> </html>
CSS
#set1{
text-align: center;
}
.flexItems{
display: flex;
background-color: whitesmoke;
}
#set2, #set3{
padding: 10px;
}Just the Tip of the Toolbox
Floats, Flexbox, and CSS in general are just some of the wonderful tools available to a web designer. Options such as CSS grid can unlock a wealth of design fixes for you, even more so on larger projects.
JavaScript and web development go hand in hand. Learning how to incorporate scripts into your own design can lead to creative designs that really allow you to let loose with some serious artistic ideas.
However, the best tool available in your arsenal is your own ability to keep learning. Practice by examples can help you sharpen your skills, but jumping into the unknown and trying new things will force you to really grow. Remember that if you fail or don’t get something right away it’s okay. You are not supposed to be an expert right away. Have fun with the process and take joy in each new victory.
____________________________________
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you are looking to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
