Layouts and Structure

Normal Flow

With HTML, the normal flow is a top-to-bottom rendering of the elements.

Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one. Inline elements appear adjacent to each other.

<h1>Normal Flow</h1>
<p>
  With HTML, the normal flow is a top-to-bottom rendering of the html file.
</p>
<p>
  Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one. <em> Inline elements appear adjacent to each other.</em>
</p>

This depends on the default display property of each element.

Change the Display properity

Any element’s display property can be changed by overriding the default behavior with CSS.

For example, <div> elements by default have the property display: block;, for example, but this can be adjusted by adding display: inline and specifying a width property for div in CSS.

inline displays an element as an inline element (ex. li{ display: inline; })
block displays an element as a block element (ex. img{ display: block; })
inline-block displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box (ex. .columns{ display: inline-block; }) and allows you to define a width and height.
- Note: Because it is an inline element, white spaces between elements are treated in the same way as white spaces between words of text. You may get unwanted gaps appearing between elements.
There are other possible properties for display.

Grids and Columns

CSS Grid

CSS Grid allows you to define the column-row structure for all of your content. By declaring display: grid on a container element, child elements need to be defined where they align to on the grid.

<div class="container">
  <div class="cell item">
    .item
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
</div>

.container {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 2fr 1fr;
  column-gap: .5em;
  height: 200px;
}
 
.item {
  grid-column-start: 1;
  grid-column-end: 4;
}

 .item

Flexbox model

Flex box is a popular method for creating “flexible” columns of containers. By declaring display: flex on a container element, child elements could be made to shrink or expand according to specified properties.

See how it works
Read more on flex-box properties
A starting point for a responsive flex grid
Tutorial: Flexbox Froggy

<div class="container">
  <div class="col">
    stuff
  </div>
  <div class="col">
    stuff
  </div>
  <div class="col">
    stuff
  </div>
</div>

.container{
  display: flex; 
  column-gap: .5em;
}

.col{
  flex: 1;
}

    stuff
  
    stuff
  
    stuff

container element still is set to fill the entire document width and has the property display: flex;
elements within the container will automatically scale to fit the available width, unless specified
advantage: you can combine a fixed-width column and a responsive, scalable column (instead of having both be percentage-based)

Grid vs. Flexbox

CSS Grid is better used for defining larger content areas
CSS Flexbox is better suited for organizing chunks within those areas

Positioning

static | relative | absolute | fixed

Positioning allows you to control the layout of a page using the position property. Positioning allows you to establish elements independent of the normal flow. By default, all elements have a position: static CSS property which gives them their normal flow.

Relative Positioning

This offsets an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.

<div>...</div>
<div class="example">...</div>
<div>...</div>

.example {
  background: blue;
  position: relative; 
  top: -15px;
  left: 100px;
}

Absolute Positioning

The element’s box is completely removed from the flow of the document and positioned with respect to its containing block, which may be another element in the document or the initial containing block. Whatever space the element might have occupied in the normal document flow is closed up, as though the element did not exist.

<div>...</div>
<div class="example">...</div>
<div>...</div>

.example {
  background: red;
  position: absolute; 
  top: 0; 
  right: 0;
  width: 60%;
}

Fixed Positioning

The element’s box behaves as though it were set to absolute, but its containing block is the viewport.
Viewport refers to the boundaries of browser window. This means that fixed position elements don’t move when the page is scrolled, because it is always relative to the window (instead of the document.)

<div>...</div>
<div class="example">...</div>
<div>...</div>

.example {
  background: blue;
  position: fixed; 
  bottom: 0;
  right: 0;
  width: 40px;
}

Z-index

The z-index value specifies the stack order of an element for any non-standard positioned elements. This is similar to how layers work in Photoshop.

An element with a bigger number is always in front of an element with a smaller number.

The default is 0. It is good to use intervals of 10 in case additional elements need to be placed in between.

<div class="square">...</div>
<div class="square">...</div>
<div class="square" >...</div>

.square{
  width: 80px;
  height: 80px;
  background: grey;
  display: inline-block;
}

.square:nth-child(2) {
  background: blue;
  z-index: 10; 
  position: relative;
  top: 40px;
  left: -40px;
}

.square:nth-child(3) {
  position: relative;
  top: 80px;
  left: -80px;
}

The Container

When positioining elements, the containing block / parent is your positioning context or reference point.

Elements can be visually positioned outside of their containing block, but still operate with the same parent-childe relationship.
For relatively positioned elements, the containing block is formed by the content edge of the nearest block-level, tablecell, or inline-block parent. The reference point is the position the block would take if it were not moved.
For absolutely positioned elements the containing block is set to the nearest ancestor (of any kind) that has a position value other than static (which is the default.)
- Note: ancestor, not necessarily parent (since parent may have static positioning)
- If the ancestor is block-level, the containing block is set to that element’s padding edge; in other words, the area that would be bounded by a border.
- If the ancestor is inline-level, the containing block is set to the content edge of the ancestor.

Overflow

visible | hidden | scroll | auto | inherit

Overflow accounts for when your content doesn’t fit within the container and specifies how the text overflows.

<div class="container">
  <div class="line">...</div>
  <div class="line">...</div>
  <div class="line">...</div>
</div>

.container {
  overflow: hidden; 
  height: 80px;
}

.line {
  height: 1.5em;
  background: #e6e6e6;
  margin-bottom: .5em;
}