CSS Float Property and Width

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 elements, the width of those boxes will shrink down automatically and gets as wide as the width of the content inside them. For example, if you had a div that contained only the word, "Hello", and if you floated that div to right or left, then the width of the floated div would be the width of the word "hello" inside it. If you had more text inside it, it'd be wider but not wider than necessary to contain the text inside it. 

Take a look at the example below for clarification.

<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; 
	padding: 2%; 
	margin: 2%; 
	border: 3px solid red; 
}

</style>
</head>

<body>
<div id="content">#content</div>
<div id="sidebar">#sidebar</div>
</body>

</html>
Two divs floated to left - Screen shot
Two divs floated to left and the width of the divs shrunk down - Click the image to enlarge (JavaScript required).

So in order to have control over your the width of the floated divs, you need to specify width for them. One example would be, if you were building a layout using float here. You would want the content to be much wider than the sidebar here. Here's how you could solve the problem. 

<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; 
}
div#content {
	float: left; 
	width: 80%; 
	margin-right: 2%; 
	background-color: #C19797;
	height: 500px; 
}
div#sidebar {
	float: left; 
	width: 18%;
	background-color: #D1C4C4;
	height: 500px; 
}
</style>
</head>

<body>
<div id="content">#content</div>
<div id="sidebar">#sidebar</div>
</body>

</html>
Two divs floated to left
Two divs floated to left width as well. Click image to enlarge (JavaScript required).

The height: 500px; given to both the divs is only to get the two divs to extend to the bottom of the viewport, otherwise, you normally don't specify a height for divs. The height is automatically defined by the length of content inside them and environment of the layout.

It's still important to understand that if you had three divs and floated them all to left for example, they'd take as much viewport width as they needed. They could take up the whole viewport width depending on the content inside them, pretty much like normal block level elements that have not been floated at all. Take a look at the following 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;
}

</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>

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: