CSS positioning - display, position, float

Aug. 28, 2020

Front-End

this code is at JS Bin

display: block

The element start on a new line, and takes up the whole width.

Block elements by default: p, div, h nav header, footer, article, section.

display: inline

The elements are positioned on the same line and does not have height and width.

Inline elements by default: a, span , strong, em, label

display: inline-block

These are inline elements with height and width adjustable.

With inline elements we could define columns. Above, to define 50% equal columns we remove border and white spaces between divs

float

Block (default) square divs

Altering position with float

CSS Float and Clear Explained - How does CSS float and clear work?

Inline-block squares divs (there are spaces between chars and rows

position: static

Default value, element is positioned according to the normal flow of the page.

position: relative

Element is positioned relative to its normal position.

position: fixed

See me bottom right!

The element is positioned relative to the viewport, which means it always stays in the same place

position: absolute

The is positioned relative to the nearest positioned (not static) ancestor (instead of the viewport).

Source code below and at github and jsbin.

css:

<style>
#d1, #d2, #d3, #d4, #d5, #d6 {
  border: 1px solid blue;;
}

.blue {
  color:blue;
}

#d3, #d4 {
  display: inline;
}

#d5, #d6 {
  display: inline-block;
  height: 3em;
  width: 45%;
}

.col1, .col2 {
  display: inline-block;
  border: 0px;
  height: 3em;
  width: 50%; 
  color: red;
}

.col1 {
  background-color: yellow;
}

.col2 {
  background-color: pink;
}

.d01, .d02, .d03, .d04, .d001, .d002, .d003, .d004 {
  height: 5em; 
  width: 5em;
}

.d01, .d001 {
  background-color: red;
}

.d02, .d002 {
  background-color: blue;
}

.d03, .d003 {
  background-color: yellow;
}

.d04, .d004 {
  background-color: green;
}

.d001, .d002, .d003, .d004 {
  display: inline-block;
}

.left {
  float:left;
}

.no-float {
  clear: both;
}

/* clearfix */
/* instead of <div style="clear: both;"></div>*/
/*
.d02::after {
  content: "";
  clear: both;
  display: block;
}

*/

#div1 {
  border: 3px solid green;
  text-align: center;
}

#div2 {
  position: relative;
  border: 3px solid green;
  text-align: center;
  left: 50px;
  text-align: center;
}

#div3 {
  position: fixed;
  border: 3px solid green;
  background-color: red;
  bottom: 0;
  right: 0;
  width: 300px;  
  text-align: center;
}

div.relative {
  position: relative;
  border: 3px solid green;
  height: 300px;
  width: 300px;
  margin: 0 auto; /* center */
}

div.absolute {
  position: absolute;
  border: 3px solid green;
  top: 50px;
  right: 50px;
  width: 100px;  
  height: 100px;
  text-align: center;
}

  </style>

html:

<p><a href="https://jsbin.com/buhodul/edit?html,css,output">this code is at JS Bin </a></p>  
  
<h2>display: <span class="blue">block</span></h2>
    
<p>The element start on a new line, and takes up the whole width.</p>  
<p>Block elements by default: p, div, h nav header, footer, article, section.</p>  
  
<div id="d1">display: <span class="blue">block</span></div>
<div id="d2">display: <span class="blue">block</span></div>

<h2>display: <span class="blue">inline</span></h2>  
  
<p>The elements are positioned on the same line and does not have height and width.</p>  

<p>Inline elements by default: a, span , strong, em, label</p>  
  
<div id="d3">display: <span class="blue">block</span></div>
<div id="d4">display: <span class="blue">block</span></div>

<h2>display: <span class="blue">inline-block</span></h2>
  
<p>These are inline elements with height and width adjustable.</p>  
  
<div id="d5">display: inline-block (I have height and width!)</div>
<div id="d6">display: inline-block (I have height and width!)</div>

<p>With inline elements we could define columns. Above, to define 50% equal columns we remove border and white spaces between divs</p>
  
<div class="col1">display: inline-block(two equal columns)</div><!--
--><div class="col2">display: inline-block(two equal columns)</div>
<div class="col2">display: inline-block(two equal columns)</div><!--
--><div class="col1">display: inline-block(two equal columns)</div>

<h2><span class="blue">float</span></h2>
  
<p>Block (default) square divs </p>  
  
<div class="d01"></div>
<div class="d02"></div>
<div class="d03"></div>
<div class="d04"></div>

<p>Altering position with float</p>  

<p><a href="https://www.youtube.com/watch?time_continue=4&v=xara4Z1b18I&feature=emb_logo">CSS Float and Clear Explained - How does CSS float and clear work?</a></p>  
  
<div class="d01 left"></div>
<div class="d02 left"></div>
<div class="no-float"></div>  
<div class="d03 left"></div>
<div class="d04 left"></div>
  
<div class="no-float"></div>  
    
<p>Inline-block squares divs (there are spaces between chars and rows</p>  
  
<div class="d001"></div>
<div class="d002"></div>
<br>
<div class="d003"></div>
<div class="d004"></div>
  
<h2>position: <span class="blue">static</span></h2>  

<p>Default value, element is positioned  acco

Return to home