Course: Layouts

Try to Control the Flow [1/32]

Putting it simple, the flow is the order of the elements shown on the page. By default, block-level elements are displayed as boxes following one another top to bottom, while inline elements arrange top to bottom and left to right and can wrap to the next line, if necessary.

You can control the flow and change the in-flow behavior of the elements. For example, you can arrange block elements column-wise rather than top to bottom.

Having mastered the flow, you'll grow mature enough to create layouts.

In the first series of tasks, let's see how the same HTML code can be arranged into different flows. For example, it can look as follows:

All you have to do is to follow the system's instructions.

Do it
<!DOCTYPE html> <html lang="ru"> <head> <title>Let's try to manage the flow</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> Our Flow: <div class="header block">.header</div> <div class="column1 block">.column1</div> <div class="column2 block">.column2</div> <div class="column3 block">.column3</div> <div class="footer block">.footer</div> </div> <div class="container"> Our Target: <img src="/assets/course13/final-flow-1.png"> </div> </body> </html>
body { font-family: "PT Sans", sans-serif; } .container { width: 300px; margin: 10px auto; } .block { margin-bottom: 10px; padding: 10px; color: #cc0000; background: none; border: 2px dashed #cccccc; } .column1 { }
HTML Academy

For the .column1 block, set:

  1. The float property of left
  2. Width of 120px
  3. Minimum height min-height of 50px.
Theory Check Next