Float properties and examples
Float property - Chapter 15 - page 387
Embedded Files
Home > Chapter Review and Exercises > Chapter 15 - Floating and Positioning > Float Properties and examples
Resources on this page:
Resources on this page:
W3Schools CSS Layout - Float and Clear examples
Five examples of the float property
Centering elements and text
Left and right aligning using float and position properties
- W3Schools CSS Layout - Float and Clear examples
There is great example of the CSS float property on w3schools.com. I encourage you to go there and test the left, right, and initial values of the float property:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_float&preval=none
This is the program being used in the w3schools example. Note that the div#myDIV selector means that its properties are only applied to <div> elements that have the id="myDIV".
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Floats</title>
<style>
div#myDIV {
width:100px;
background-color:red;
float:none;
}
</style>
</head>
<body>
<span>A span element</span>
<div id="myDIV">myDIV</div>
<span>Another span element</span>
</body>
</html>
The w3schools pages on the CSS float property are here:
2. Five examples of the float property
2. Five examples of the float property
The following are five examples of the float property. These were taken from this source: https://www.youtube.com/watch?v=EESvTsa9M6M
Example #1 - A red and green box
Example #1 - A red and green box
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Floats</title>
<style>
#one {
background-color: green;
width: 300px;
height: 300px;
}
#two
{
background-color: red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>
There are two <div> elements in this example. The first is given the color green and the second is red. Each is 300 pixels by pixels in size. The <div> element is a block element, meaning it takes up an entire line. So the second <div> element, the red box, sits below the green box, on its own line.
This HTML would appear as this in a browser:
Example #2 - Using floats to move the boxes onto the same line.
Example #2 - Using floats to move the boxes onto the same line.
This time a float property is used in each selector. The #one selector has the float property with a value of left. The #two selector has the float property with a value of right.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Floats</title>
<style>
#one
{
background-color: green;
width: 300px;
height: 300px;
float: left;
}
#two {
background-color: red;
width: 300px;
height: 300px;
float: right;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>
This HTML would appear as this in a browser. The red box is now right justified.
Example #3 - Putting these two boxes inside a box
Example #3 - Putting these two boxes inside a box
The float property moves elements to the far left or right of whatever element box it is in. In the previous example, the two boxes take up the entire width of the website. In this example, the two boxes are inside another box element that is only 700 pixels wide and 400 pixels height.
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Floats</title>
<!-- https://www.youtube.com/watch?v=EESvTsa9M6M -->
<style>
#box {
width: 700px;
height: 400px;
background-color: blue;
}
#one {
background-color: green;
width: 300px;
height: 300px;
float: left;
}
#two {
background-color: red;
width: 300px;
height: 300px;
float: right;
}
</style>
</head>
<body>
<div id="box">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
This HTML would appear as this in a browser. The red and green boxes are now inside the blue box.
Example #4 - Reducing the size of the container
Example #4 - Reducing the size of the container
The blue box in the previous example was 700 pixels wide. In this example, it will be shortened to only 500 pixels.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Floats</title>
<!-- https://www.youtube.com/watch?v=EESvTsa9M6M -->
<style>
#box {
width: 500px;
height: 400px;
background-color: blue;
}
#one {
background-color: green;
width: 300px;
height: 300px;
float: left;
}
#two {
background-color: red;
width: 300px;
height: 300px;
float: right;
}
</style>
</head>
<body>
<div id="box">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
This HTML would appear as this in a browser. This time, the green and red boxes cannot fit inside the blue box, so the red box is put under the green box, and is still right-justified in the blue box.
Example #5 - Removing the float properties.
Example #5 - Removing the float properties.
If you now removed the float left and float right properties, the green and red boxes will both be left-justified.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Floats</title>
<!-- https://www.youtube.com/watch?v=EESvTsa9M6M -->
<style>
#box {
width: 500px;
height: 400px;
background-color: blue;
}
#one {
background-color: green;
width: 300px;
height: 300px;
/* float: left; */
}
#two {
background-color: red;
width: 300px;
height: 300px;
/* float: right; */
}
</style>
</head>
<body>
<div id="box">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
This HTML would appear as this in a browser. This time, both the green and red boxes are left-justified inside the blue box.
3. Centering elements and text
3. Centering elements and text
These notes are based on the W3Schools resource here: https://www.w3schools.com/css/css_align.asp
1. Center Align an Element
1. Center Align an Element
To horizontally center a block element (like <div>), use margin: auto; . Here the .center class selector in the style section sets the margin to auto. The <div class="center"> is then centered on the page (and given a border so that you can see how it is placed on the screen). Note that the width is set to 60%. If you set the width property of the element, as is done here, that will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins:
<style>
.center {
margin: auto;
border: 3px solid #73AD21;
padding: 10px;
width: 60%;
}
</style>
</head>
<body>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
This will appear in your browser as this:
2. Removing the Width property
2. Removing the Width property
If you do not set the width property of the element, or set it to 100%, the center aligning will have no effect, as the element will stretch all the way across the container.
<style>
.center {
margin: auto;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
This will appear in your browser as this:
3. Centering Images
3. Centering Images
To center an image, set both the left and right margin to auto and use the display property to make it into a block element.
The display property is discussed in Chapter 14, on page 380.
It is important to know the distinction between block elements and inline elements.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Some examples of block-level elements are: <div>, <h1>, <p>, and <div>.
An Inline element does not start on a new line and only takes up as much width as necessary.
Some examples of inline elements are <span>, <a>, <b>, <em>, and <img>.
The image you want to center is included in an <img> element, which is inline.
To center it, the <img> element needs to be changed into a block elements.
To do this, the display property is used: display: block;
Here is an example:
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
The img selector in the style section is making the inline img element into a block element, and it is setting the left and right margins to auto. In this example, a picture taken of Paris is centered on the page:
4. Why using the margin: auto; property to center an inline image doesn't work
4. Why using the margin: auto; property to center an inline image doesn't work
If you were to use the margin: auto; property instead of the display: block;, margin-left: auto;, and margin-right: auto;, properties this is what it would look like:
<head>
<style>
img {
margin: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
Since the <img> element is inline, it doesn't get treated like a block element, and doesn't get centered:
4. Additional Resources
4. Additional Resources
Website layout using the float property to position images - a Chapter 14 and 15 topic on p. 388 (This is optional)
Website layout
Two Column Layout - using the float property from Chapter 15, p. 387
Going beyond - the following topics are NOT covered in the class text, and so these are optional
Report abuse