Move div down

Question

I have 4 Ivs on my page, next to each other, as I can do, so that the last div is aligned left on the bottom line ?

My Code:

     <!-- DIV 1 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">1</div>

     <!-- DIV 2 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">2</div>

     <!-- DIV 3 -->
     <div style="float: left; width: 100px; height: 100px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">3</div>

     <!-- DIV 4 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; clear: Left; border-color: #FFFFFF;">4</div>

     <!-- DIV 5 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">5</div>

As it was after inserting the clear:left.

Problem 2 - After using ( clear:left ).

Another problem arose, I need to fit the div’s as per the image below, I want to do this using only CSS and without using the margin top, I need to do this using some pure CSS solution. The numbers within the DIV’s refer to the sequence in which the DIV’s are displayed by PHP coming from Mysql.

Thank you

Answer 1

Good in css and html the elements relate, for this specific solution you can do as below, however it may be necessary to adapt, without the whole code I have no way to go beyond...

<div style="float: left; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">1</div>
 <div style="float: left; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">2</div>
 <div style="float: left;width: 100; height: 70px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">3</div>

  <!-- Fazer essa div abaixo se alinha a esquerda na linha de baixo -->     

 <div style="position:absolute; margin-top:55px; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">4</div>

Let’s try another way:

div
{
    float:left;  
    height:50px;
    width:100px;
    border: 1px solid #000000;
}
#id4
{
    clear:left;
}
#id3
{
   height:102px;
   margin-top:-52px;
}

<div>1</div>
<div>2</div>
<div  id="id4">4</div>
<div>5</div>
<div id="id3">3</div>

Or one more option where I define a width to the content and thus use the float:right, but it’s like I say every case is a case:

#content
{
    width: 306px;
    height: auto;
}
div
{
    float:left;  
    height:50px;
    width:100px;
    border: 1px solid #000000;
}
#id3
{
    float:right;
    height:102px;
}

<div id="content">
    <div>1</div>
    <div>2</div>
    <div id="id3">3</div>
    <div>4</div>
    <div>5</div>
</div>