CSS Float Property and Shrink Wrap

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.

As you know, Block level elements like div normally take up the whole viewport width. When you float elements, the width of those elements shrink down automatically. The element gets only as wide as the content inside it. Take a look at the example below.

Here, we have a simple HTML page with three divs inside it. The divs are occupying the whole viewport width. Some CSS styles have been defined for the page so that elements can be seen better on the page visually.

<html>

<head>
<meta charset="UTF-8">
<title>Float and Shrink Wrap</title>
<meta name="description" content="Here, you'll learn what is meant by shrink wrap when elements are floated">
<style>
body {
	background-color: #DBD6D6; 
	padding: 20px; 
}
div {
	background-color: white; 
	color: black; 
	border: 3px solid red; 
	border-radius: 5px; 
	padding: 20px; 
	margin: 20px; 
}
</style>
</head>

<body>
	<h1>Float and Shrink Wrap</h1>
	<p>When you float elements, the width of the floated elements shrinks down. The floated elements get only as wide necessary to accommodate the content inside them.</p>
	<p>Take a look at the three divs below.</p>
	
	<div id="div1">Div1</div>
	<div id="div2">Div2</div>
	<div id="div3">Div3</div>
</body>

</html>

Next, what we want to do is float the three divs to the left:

<html>

<head>
<meta charset="UTF-8">
<title>Float and Shrink Wrap</title>
<meta name="description" content="Here, you'll learn what is meant by shrink wrap when elements are floated">
<style>
body {
	background-color: #DBD6D6; 
	padding: 20px; 
}
div {
	float: left; 
	background-color: white; 
	color: black; 
	border: 3px solid red; 
	border-radius: 5px; 
	padding: 20px; 
	margin: 20px; 
}
</style>
</head>

<body>
	<h1>Float and Shrink Wrap</h1>
	<p>When you float elements, the width of the floated elements shrinks down. The floated elements get only as wide necessary to accommodate the content inside them.</p>
	<p>Take a look at the three divs below.</p>
	
	<div id="div1">Div1</div>
	<div id="div2">Div2</div>
	<div id="div3">Div3</div>
</body>

</html>

As you can see, all we added to the code was div { float: left; } which essentially floats all the three divs to the left. The width of the three divs were automatically reduced. The divs are now only as wide as the content inside them. This is called shrink wrap in CSS.

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: