html - How do I fit the inner box inside the outer box? -

so attempting code fluid layout, , experimenting float tag. first step develop simple fluid layout has 2 divisions fill whole page in width. blue box has width of 25%, color #0076a3. height 600 pixel, green box ha sa width of 75%, color # 7cc576. height 600 pixels. want add 4 boxes inside blue box, each has height 150 pixels.

afterwards, wanted place 2 divisions (that formed left division , right division) @ center of has width of 1200px. problem facing can fit inner box(blue boxes , green one) inside outer box(gray one) properly.

#maindiv {    width: 1200px;    margin: 0 auto;    background-color: #c2c2c2;  }  #leftdiv,  #rightdiv {    height: 600px;    margin: 0px;  }  #leftdiv {    width: 25%;    background-color: #0076a3;    float: left;  }  #rightdiv {    width: 75%;    background-color: #7cc576;  }  #box1,  #box2,  #box3,  #box4 {    height: 150px;    clear: both;  }  #box1 {    background-color: #6dcff6;  }  #box2 {    background-color: #00bff3;  }  #box3 {    background-color: #00aeef;  }  #box4 {    background-color: #0076a3;  }

<div id="maindiv">    <div id="leftdiv">      <div id="box1"></div>      <div id="box2"></div>      <div id="box3"></div>      <div id="box4"></div>    </div>    <div id="rightdiv"></div>  </div>

this final output should this:

okay got working reason can't seem find whitespace coming on either blue or green box there little space between them - while you'll see adjusted width of blue box 24.66% allows them on same line - took away floats , clears - want use "inline-block" this.

here fiddle play with: https://jsfiddle.net/rockmandew/lkkuzmh9/

#leftdiv {     width: 24.66%;     background-color: #0076a3;     display:inline-block; } #rightdiv {     width: 75%;     background-color: #7cc576;     display:inline-block; } 

let me know if have questions.