CSS Float statement

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

height is spelled incorrectly. what does your display look like?

Answer 2

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>

Answer 3

If you're able to use CSS3, you can use a selector to accomplish this without tons of code:

CSS:

div.boxContainer>div{
    float: left;
    width: 50%;
    height: 50%;
}

div.boxContainer div:nth-of-type(3){
    clear:both;
}

HTML:

<div class="boxContainer">
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">1</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">2</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">3</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">4</div>
</div>