Float Test

How floats work .

by avinash2618

HTML

<div class="pDiv">
<p class="p p1">p1
</p>
<p class="p p2">p2
</p>
<p class="p p3">p3
</p>
<p class="p p4">p4
</p>
</div>

<div class="yDiv">
<p class="y p1">y1
</p>
<p class="y p2">y2
</p>
<p class="y p3">y3
</p>
<p class="y p4">y4
</p>
</div>

CSS

.pDiv{
  float:right;
}

.yDiv{
  float:left;
}

p{
  width:50px;
  height:50px;
  border:2px solid black;
  float:right;
}
y{
  width:50px;
  height:50px;
  border:2px solid black;
  float:left;
}