How can I have 4 divs inside a div that are all equal in size and are not joined together?

Question

Here is an example of what I'm describing:

Answer 1

Simple way to achieve the thing you want : use of float:left do work for you

<div style="width:100%">
 <div style="width:100%">
   <div style="width:45%; float:left">  
      div1
   </div>
   <div style="width:45%; ">  
      div2
   </div>
 </div>
 <div style="width:100%">
   <div style="width:45%; float:left">  
      div3
   </div>
   <div style="width:45%; ">  
      div4
   </div>
 </div>      
</div>

Answer 2

Use float and margin to solve your problem as rahul already suggested. To have 2 floats next to each other use width.

CSS:

.outer {
  border: 1px solid black;
  width: 100%;
  float: left;
}

.inner {
  margin: 10px;
  float:left;
  width:45%;
  border: 1px solid black;
}

HTML:

<div class="outer">
  <div class="inner">div</div>
  <div class="inner">div</div>
  <div class="inner">div</div>
  <div class="inner">div</div>
</div>

I used 45% for the width of the floats, to make sure that they fit. 50% is not working due to the margin. The 45% could be increased slight more I guess, but that depends on the margin of the inner divs.