HTML Layout

Overview

Layout refers to how the elements in a web page are laid out on the screen.

For example, consider the following set of colored sections, arranged vertically.



These sections could be arranged horizontally. Layout is what achieves this effect.

Default Layout


Whenever two elements occur one after another in an HTML page, the default behaviour is to place the elements one after the other vertically. 


<div style="height:50px;background-color: lightgreen;"></div>
<div style="height:50px;background-color: lightblue;"></div>
Try it!

Nested Tags


When tags are placed within another tag (nesting), the default rules apply unless the HTML code specifies a layout style (see below) 


<div style="height:100px;">
  <div style="height:50px;background-color: lightgreen;flex:1;"></div>
  <div style="height:50px;background-color: lightblue;flex:1;"></div>
</div>
Try it!

Layout Styles


Layout styles can be used to change how elements are laid out on the page. There are two primary layout styles that can be used to alter how elements are laid out.

  • Flex - gives a simple way to lay elements out
  • Grid Layout - more complex than flex, but also possibly more powerful

Contents