box1
box2
Notice how the text will wrap around the boxes. You will also notice that even though the floating divs were created inside the article they will extend outside of that block if there is not enough room.
From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 6.8: Floating
You have seen in newspapers and magazines how they have pictures with the text wrapping around the image. This was a very early feature that was available in CSS known as floats. The float property is telling CSS to float the object meaning that it will be moved to the left or right (depending on the settings) and text will wrap around the object. In addition to left and right you have inline-start and inline-end which are the same as left and right but honor the direction of the text so if you are using a language that is right-to-left then inline-start would be right and inline-end would be left.
Let's set up some objects to float (normally you would use images, but solid blocks of color will work for demonstration purposes).
article {
width: 800px;
background: #F0e0FF;
font-size: large;
}
.demoRedBox{
background: red;
width: 200px;
height: 200px;
color: darkcyan;
}
.demoGreenBox{
background: green;
width: 200px;
height: 200px;
color: #220044;
}
.demoBlueBox{
background: blue;
width: 200px;
height: 200px;
color: goldenrod;
}
width: 800px;
background: #F0e0FF;
font-size: large;
}
.demoRedBox{
background: red;
width: 200px;
height: 200px;
color: darkcyan;
}
.demoGreenBox{
background: green;
width: 200px;
height: 200px;
color: #220044;
}
.demoBlueBox{
background: blue;
width: 200px;
height: 200px;
color: goldenrod;
}
Next our left and right floats.
.left {
float: left;
}
.right {
float: right;
}
float: left;
}
.right {
float: right;
}
And our content.
<article>
<div class="demoRedBox left">box1</div>
<div class="demoBlueBox left">box2</div>
<p style="margin:1em">text here </p>
</article>
<article>
<div class="demoRedBox right">box1</div>
<div class="demoBlueBox right">box2</div>
<p style="margin:1em">text here</p>
</article>
<div class="demoRedBox left">box1</div>
<div class="demoBlueBox left">box2</div>
<p style="margin:1em">text here </p>
</article>
<article>
<div class="demoRedBox right">box1</div>
<div class="demoBlueBox right">box2</div>
<p style="margin:1em">text here</p>
</article>
box1
box2
This also applies to the right. But when the new article was posted, we had not cleared the height of the previous boxes so there is some overlap. The right, however, does honor the order of the right is rightmost first. You should also note that the 1em margin for the paragraph is ignored by the divs.
You will notice that floats aren’t taken into account when margins and padding are added. This means that if you want margins around the float will need to have them as part of the float.
.leftWithMargin {
margin: .5em;
float: left;
}
.rightWithMargin {
margin: .5em;
float: right;
}
margin: .5em;
float: left;
}
.rightWithMargin {
margin: .5em;
float: right;
}
It is also possible to skip to the end of a float (useful for a new section) by using the clear attribute. I tend to just use embedded styles for clear, but having classes for clearing is certainly an option. You can clear left, right, or both.
<article>
<div class="demoRedBox right">box1</div>
<div class="demoBlueBox right">box2</div>
<p style="margin:1em"> text
</p>
</article>
<article>
<div class="demoRedBox leftWithMargin">box1</div>
<p>text</p>
<div class="demoBlueBox rightWithMargin">box2</div>
<p>text</p>
<p style="clear:left; margin:1em;">text</p>
</article>
<div class="demoRedBox right">box1</div>
<div class="demoBlueBox right">box2</div>
<p style="margin:1em"> text
</p>
</article>
<article>
<div class="demoRedBox leftWithMargin">box1</div>
<p>text</p>
<div class="demoBlueBox rightWithMargin">box2</div>
<p>text</p>
<p style="clear:left; margin:1em;">text</p>
</article>
box1
Now that we have some margins in our floats, our text have some margin to them. To keep the margins only to the material being added, just that side has a margin.
box2
Also notice that floats start on the row they are added.
By using clear we can skip over left, right, or both floats. Here I am just skipping the left float.
Floats are often all you will need for images you want to wrap text around. Of course it would be nice if we had a bit more control over floating elements, which we discuss in the next section.
Chapter contents
Chapter 6 Contents
6.1 Layout Cheat Sheets
This chapter's summary cheat sheet.
6.2 The Layout problem
Why layout is complicated for web pages.
6.3 Display blocks
The basic display types.
6.4 Flexible Boxes
A box that contains other components and sizes them to fit the available space.
6.5 Grid
A flexible grid where you can lay out your design.
6.6 Grid Templates
Using templates to make laying out components in a grid easy.
6.7 Multiple columns
Using the columns attributes to easily allow for multiple columns.
6.8 Floating
Having images (or other blocks) have text wrap around them.
6.9 Position
There are other ways of placing elements by using the position attribute.
6.10 Media Queries
Altering CSS based on the properties of the device the page is being rendered on.
6.11 Project: Tic-Tac-Toe
The project for this chapter.
6.12 Project Solution
Solution for this chapter's project