Question

.float1  {
float: left;
width: 50%;
height: 50%;
}
.float2  {
float: right;
width: 50%;
height: 50%;
}
.float3  {
float: left;
width: 50%;
height: 50%;
}
.float4  {
float: right;
width: 50%;
height: 50%;
}
.clear {
clear: both;
}


HTML:


<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="clear"></div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>
<div class="clear"></div>

I want an output like this image:

Please Correct my css code. Thank you.

Answer 1

You only need to clear the third element, so there is no need for any clear elements. Float all elements to the left to put them beside each other instead of some to the left and some to the right:

.float1, .float2, .float3, .float4 { float: left; width: 50%; height: 50%; }
.float3 { clear: both; }

HTML:

<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>