html - Placing a div below a wrapper containing multiple divs -

this might easy one. below structure want create:

but end either this:

or this:

here code:

html

.newdiv2,  .newdiv3,  .newdiv4,  .newdiv5 {    width: 25px;    height: 25px;    margin-bottom: 5px;    border: 3px solid black;  }  .newdiv6 {    width: 150;    height: 150;    border: 3px solid black;  }  .newdiv {    height: 250px;    width: 450px;    float: left;    border: 3px solid black;  }  .divwrapper {    float: left;    border: 3px solid blue;  }  .mainwrapper {    display: block;  }

<div class="mainwrapper">    <div class="newdiv"></div>    <div class="divwrapper">      <div class="newdiv2"></div>      <div class="newdiv3"></div>      <div class="newdiv4"></div>      <div class="newdiv5"></div>    </div>  </div>  <div class="newdiv6"></div>

this looks second image above (in chrome browser).

you can reset block formating context of main container, minds inside , outside floatting elements.

here simpliest add : overflow:hidden; since no size involved

.newdiv2,  .newdiv3,  .newdiv4,  .newdiv5 {    width: 25px;    height: 25px;    margin-bottom: 5px;    border: 3px solid black;  }  .newdiv6 {    width: 150px;    height: 150px;    border: 3px solid black;  }  .newdiv {    height: 250px;    width: 450px;    float: left;    border: 3px solid black;  }  .divwrapper {    float: left;    border: 3px solid blue;  }  .mainwrapper {    display: block;    /* reset bfc */    overflow:hidden;  }

<div class="mainwrapper">    <div class="newdiv"></div>    <div class="divwrapper">      <div class="newdiv2"></div>      <div class="newdiv3"></div>      <div class="newdiv4"></div>      <div class="newdiv5"></div>    </div>  </div>  <div class="newdiv6"></div>