Exercise: Using float

Add float properties to the paragraphs so that they appear in order from left to right: Block 2, Block 3, Block 5, Block 4, Block 1. If your screen is too narrow for paragraphs to all appear on one line, click on the arrow to see the page in a separate window, which you can then resize as you wish.

Note:

Hints:

  • undefined

Solution to the exercise

Blocks 2, 3, and 5 are floated to the left and Blocks 1 and 4 are floated to the right. Notice that since Block 1 comes before Block 4 in normal flow, it is floated before Block 4 is placed and hence appears farther to the right.

Note:

Hints:

  • undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
p {
   margin1rem;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX