Positioning in HTML web design is a matter of both creative and technical needs. Knowing where and how to implement changes in content flow can take a basic layout into something wonderful.
One of the most basic CSS properties to work with is CSS Float. You may have heard of the options for CSS float left or CSS float right but never really understood what that meant.
In this brief guide, you will learn what the CSS float property does and how to use it in your designs. We will provide basic sample code and images to help explain the CSS float property in a clear format. If you are new to CSS as a whole, consider reading up on the basics first or check out the Udacity CSS Hub for even more quick explainers.
What is the CSS Float Property?
The CSS float property deals with the way HTML contents on a page work with one another. In particular, their relation to the display flows on the page. A better way to imagine it is to think of each HTML element as its own box. The boxes take up as much space as instructed.
The next HTML element will display on the next line (or block) available on the page. In the sample code below, you can see this action.
Sample HTML Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Floats</title> <link rel="stylesheet" href="CSSFloat.CSS"> </head> <body> <h2>Udacity: CSS Float</h2> <hr> <div>This is div number 1.</div> <div>This is div number 2.</div> </body> </html>
With no CSS styling applied, the page output appears like this.
In the image above, you can see that the divs are stacked in a horizontal form. The first one takes the first line, and the second one takes over the next. However, you can see that there is enough space for them to exist on one block together.
In the next section, you will see how to apply the float function to alter the positions of these elements.
CSS Float: Float Left and Float Right
In the sample HTML document, the two divs were left stacked on one another. In the following example, you will see how the float property can alter this positioning. First, the sample code will have ids applied to the divs to allow for easier styling in the CSS. For more information on using ids see this on HTML/CSS Class and ID Selectors.
<div id="div1">This is div number 1.</div> <div id="div2">This is div number 2.</div>
Now with the ids in place, the CSS stylesheet will be used to add in the float properties to the target divs. The goal is to have both of these divs exist on the same block. An easy way to do that is to tell the first to float.
In particular, div1 will be told to float to the left of the page. This is shown on the CSS code below.
#div1{ float: left; border-style: solid; border-color: black; } #div2{ border-style: solid; border-color: red; }
You may also notice we applied some additional styling in the form of a border style and border color. This is not necessary to make the float work. However, it does make it easier to see in this particular example. If you are following along with the code, feel free to have some fun with the styling to see what you can do.
This should provide the following output on the HTML page.
With the style of “float left” applied to the div 1, div 2 was able to take up any space left over on that block. You may notice that there is a good bit of space still left on that block as div 2 is longer than div 1.
Take a look at what happens when you apply the float left style to both of the divs at once.
#div1{
float: left;
border-style: solid;
border-color: black;
}
#div2{
float: left;
border-style: solid;
border-color: red;
}With this code saved and the page reloaded, you should see the following.
Now with both divs instructed to float left, they will take up as much space as allowed on that block until they either hit an applied container or another floated element.
If you wondered what would happen if the second div floated right instead of floating left, take a look below.
#div2{
float: right;
border-style: solid;
border-color: red;
}This will now instruct that div to float to the right.
As you can see, the elements are now seperated by their float properties. Although, they are still considered to be on the same line or block. The second div is trying to take up the space to the right until it hits the border or container, (or the page).
CSS Float: Float None and Inherit
Float: None
In this section, you will learn what the “none” value is for the CSS float property. This one is very simple. By using the value of none, the CSS stylesheet will simply not apply a float property to the element. A null value is the actual default state for an element’s float. Essentially, this is your way to expressly state that the element should not float in any direction.
#div1{
float: none;
border-style: solid;
border-color: black;
}
#div2{
float: none;
border-style: solid;
border-color: red;
}This sample CSS code will provide the following output on the page.
With no floats applied, each div simply moves itself to the next open block on the page, taking as much room as possible on that block.
Float: Inherit
The “inherit” value of the float property directs the target element to take on, (or inherit), the float property of its parent element. This is useful as you know that the child elements of a parent should all be styled in a particular format.
In the sample code below you can see that a div class titled “sideMenu” was created. Within that class, 4 divs were added with the class of “menuItem.”
<body> <h2>Cool Website Header</h2> <hr> <div class="sideMenu"> <div class="menuItem">Tech News</div> <div class="menuItem">Upcoming Movies</div> <div class="menuItem">Reviews</div> <div class="menuItem">Latest Trends</div> </div> </body>
With no CSS styling applied to the document, this is the provided output.
Heading to the CSS stylesheet, you can see how the inherit value is applied.
.sideMenu{
float: right;
}
.menuItem{
float: inherit;
}The first code set is the sideMenu class. This element provided the float “right” value. The next code set is the menuItem class that the four divs within the sideMenu class are part of. The image below provides a visual breakdown of the CSS code.
In this next image, you can see how the inherited float property gets styled onto the menu item divs.
The float right property definitely took effect as each one of the menu Item divs floated right, taking up as much space to the right as possible. Left alone this looks a bit odd. Thankfully, with CSS it only takes a bit of styling to change that.
The sample CSS code below contains various styling options to create a basic change to the page. Note that the float inheritance is still in effect, although the parent float property is now set to “float left” instead.
.sideMenu{
float: left;
}
.menuItem{
float: inherit;
border-bottom-style: solid;
border-color: black;
margin: 5px;
color: whitesmoke;
}
.menuItem:first-letter{
font-family: Georgia;
color:khaki;
font-size: 25px;
line-height: 8px;
padding-top: 4px;
}
h2{
font-weight: bolder;
color:gold;
}
hr{
margin: 6px;
border: 2px solid springgreen;
border-radius: 25px;
}
html{
background: linear-gradient(to right, #7474bf, #348ac7);
}
With this CSS code saved in place, the refreshed HTML page should now have the following output.
It’s the start of a design that can grow into something less bland than it was before. Feel free to try and have some fun with the properties and values in the code. Try to mold the sample to something you prefer in both position and color. The sample used here should give you an idea of what you can do and what you can improve on.
Exploring Your CSS Abilities
Learning CSS is more than just knowing what properties and values to use. It’s also about knowing why you want to use them in the first place. Consider how the colors match up or the way the items are spaced on the page.
If you were hired by a client or close friend to work on a project, how would you propose changes you wanted to make? You could explain your ideas to them on paper or through dialog. Alternatively, you could also use your creative ability to show them through code.
Taking time to explore the ideas you have in code and then building on that can give you two amazing products. The first is the results of your creative questioning. The second is the confidence to not just ask what can be done better, but actually deliver on it as well.
_______________________________________________________
Why stop at just CSS? The creative ability in programming is allowing people to do even more with their ideas. 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.
