CSS Float
What is CSS Float?
CSS Float allows elements to move to the left or right, with surrounding elements rearranging accordingly. Float is commonly used for images, but it is also very useful in layouts.
How Elements Float
When an element floats horizontally, it can only move left or right, not up or down. A floating element will move as far as possible to the left or right until its outer edge touches the containing box or the edge of another floating box. Elements that come after the floating element will wrap around it, while elements before it will not be affected. If an image floats to the right, the following text will wrap around its left side:
img {
float: right;
}
Adjacent Floating Elements
If you place several floating elements together, they will align next to each other if there is space. Here, we use the float property for a thumbnail gallery:
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
Clearing Floats - Using Clear
After elements float, surrounding elements rearrange themselves. To prevent this, use the clear property, which specifies that no floating elements should be on either side of the element. Add a thumbnail gallery to text using the clear property:
.text_line {
clear: both;
}
All CSS Float Properties
The numbers in the "CSS" column represent the CSS version (CSS1 or CSS2) that defined the property.
| Property | Description | Values | CSS |
|---|---|---|---|
| clear | Specifies whether an element can be adjacent to floating elements. | left, right, both, none, inherit | 1 |
| float | Specifies whether a box (element) should float. | left, right, none, inherit |
Adding Borders and Margins to Images
Let's add a border and margin to an image and float it to the right side of the paragraph:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webcode101(webcode101.com)</title>
<style>
img {
float: right;
border: 1px dotted black;
margin: 0 0 15px 20px;
}
</style>
</head>
<body>
<p>
In the following paragraph, the image will float to the right. A black dotted border is added to the image. We also added a 0px margin at the top and right, a 15px bottom margin, and a 20px left margin, keeping the text away from the image:
</p>
<p>
<img src="logocss.gif" width="95" height="84">
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Floating Title and Image to the Right
Float a title and image to the right:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webcode101(webcode101.com)</title>
<style>
div {
float: right;
width: 120px;
margin: 0 0 15px 20px;
padding: 15px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95" height="84"><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Floating the First Letter of a Paragraph to the Left
Style the first letter of a paragraph to float to the left:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webcode101(webcode101.com)</title>
<style>
span {
float: left;
width: 1.2em;
font-size: 400%;
font-family: Algerian, Courier;
line-height: 80%;
}
</style>
</head>
<body>
<p>
<span>This</span> is some text. This is some text. This is some text.
</p>
</body>
</html>
Creating a Table-less Webpage
Use float to create a webpage with a header, footer, left content, and main content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="Responsive Design, Web Design, HTML, CSS, Chania">
<meta name="description" content="Learn about the beautiful city of Chania, its history, and its division between the old town and the modern city. Explore how to create responsive web pages.">
<title>Exploring the City of Chania: A Guide to Responsive Web Design</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<ul class="topmenu">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#about">About Us</a></li>
</ul>
<div class="clearfix">
<div class="column sidemenu">
<ul>
<li><a href="#flight">The Flight</a></li>
<li><a href="#city" class="active">The City</a></li>
<li><a href="#island">The Island</a></li>
<li><a href="#food">The Food</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#history">The History</a></li>
<li><a href="#oceans">The Oceans</a></li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Chania</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided into two parts, the old town and the modern city.</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>