CSS Float Property and Float Drop

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don't take the course but that's primarily not the goal of this post.

When you float boxes or elements, they move to the top of the parent element and find some place to move in if there's enough space. If not, they'll just jump down to the next line wherever they find some space. Take a look at this example:

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="Here, you'll learn what is meant by shrink wrap when elements are floated">
<style>
body {
	background-color: #8c8c8c; 
	font-size: 100%; 
	font-family: Verdana, Arial, sans-serif; 
}
div {
	float: left; 
	background-color: white; 
	color: black;
	border: 1px solid red;
	padding: 20px; 
	margin: 10px;
	width: 30%; 
	height: 350px; 
}
div#box1 {
	height: 500px; 
}
</style>
</head>

<body>
<div id="box1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="box2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="box3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</body>

</html>

Now if I limit the viewport width to 1280x600, the third box (#box3) jumps down but it doesn't jump down to the bottom of #box1 but to the bottom of #box2. 

If I keep making the viewport smaller, eventually, box#2 will be located at the bottom of #box1 and then #box3 will be located at the bottom of #box2. It's hard to get the image to show the whole height of viewport. To do that, we'd have to use the scroll bar. The image below shows only a portion of #box1. This is called Float Drop in CSS jargon.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the "float" CSS property. You can take this course with us at the following address: