CSS positioning2 - block, inline, float

Sept. 4, 2020

Front-End

Positioning using float

Positioning using display:inline

The code is below and at github and jsbin:

css:

<style>

.square-container {
  height: 200px;
  width: 200px;
}

.square1 {
  background-color: red;
  height:50%;
  width:50%;
  float: left;
}  

.square2 {
  background-color: yellow;
  height:50%;
  width:50%;
  float: left;
}  

.square3 {
  background-color: blue;
  height:50%;
  width:50%;  
  float: left;
}  

.square4 {
  background-color: green;
  height:50%;
  width:50%;
  float:left;
}  

.no-float {
  clear: both;
}


.square01 {
  background-color: red;
  height:50%;
  width:50%;
  display: inline-block;
}  

.square02 {
  background-color: yellow;
  height:50%;
  width:50%;
  display: inline-block;
}  

.square03 {
  background-color: blue;
  height:50%;
  width:50%;  
  display: inline-block;
}  

.square04 {
  background-color: green;
  height:50%;
  width:50%;
  display: inline-block;
}

</style>

html:

<p>Positioning using float</p>  
  
<div class = "square-container">  
  <div class="square1">1</div>  
  <div class="square2">2</div> 
  <div class="no-float"></div>
  <div class="square3">3</div>  
  <div class="square4">4</div>    
</div>  
  
<p>Positioning using display:inline</p>  

<div class = "square-container">  
     <div class="square01">1</div><!--  
  --><div class="square02">2</div><!-- 
  --><div class="square03">3</div><!--  
  --><div class="square04">4</div>    
</div>

Return to home