我想将第二行div放在第一行div的正下方

Question

I have two rows in which in first row I have three div's, third div is having great height. Where as in second row I have one single div.I just want to place my second row div just below the first row div without using margin top in negative and sequence should be same instead of taking parent div of 1,2 and 4th div.Thank you in advance.

 div{ float: left; color: white; text-align: center; font-size: 16px; vertical-align: middle; } 

 <div style="width:40%;padding:40px;background-color:pink;"> 1 </div> <div style="width:20%;padding:40px;background-color:black;"> 2 </div> <div style="width:20%;padding:40px;background-color:green; height:500px;"> 3 </div> <div style="width:20%;padding:40px;background-color:blue;"> 4 </div> 

Answer 1

yahh just add clear both to those div that you want to put down. like

<div style="width:20%;padding:40px;background-color:black;clear: both;">2</div>

Answer 2

Maybe you should try a different structure in your divs if you want to achieve that, if I understand correct..

Create one row with cascading divs for the left-pane and one row for the right-page (third div)

<div class="left-pane">
    <div style="width:40%;padding:40px;background-color:pink;">1</div>
    <div style="width:20%;padding:40px;background-color:black;">2</div>
    <div style="width:20%;padding:40px;background-color:blue;">4</div>
</div>
<div class="right-pane">
    <div style="width:20%;padding:40px;background-color:green; height:500px;">3</div>
</div>

Let me know if this worked out for you. I'll be happy to help.

Answer 3

Finally got the solution by my own. Thank you guys for your efforts.

 div{ color: white; text-align: center; font-size: 16px; vertical-align: middle; } 

 <div style="width:40%;padding:40px;background-color:pink; float:left;"> 1 </div> <div style="width:20%;padding:40px;background-color:black;float:left;"> 2 </div> <div style="width:20%;padding:40px;background-color:green; height:500px;float:right;"> 3 </div> <div style="width:20%;padding:40px;background-color:blue;float:left;"> 4 </div>