colocar 4 divs centrados...

[ryu16]

como le puedo hacer para poner 4 divs. Dos juntos y los otros dos abajo de los dos primeros, centrados....ya le intente usando float, pero se me van todos a la izquierda o derecha dependiendo....

Código HTML:

<section id="seccion">
    
 <article>
                <div id="espacio_1">
                Este es el texto de mi primer mensaje 
                
                </div>
                
                <div id="espacio_2">
                 Este es el texto de mi segundo mensaje 
                
                </div>
                
                
                  <div id="espacio_3">
                 Este es el texto de mi segundo mensaje 
                
                </div>
                
                
                  <div id="espacio_4">
                 Este es el texto de mi segundo mensaje 
                
                 </div>
               
    </article>
</section>
 

mi css es este

Código CSS:

#seccion { 
float: left; 
width: 665px;
padding-top:20px;
margin left: 10px;
margin-right:20px;
} 
 
article { 
 
width:665px;
height:400px;
background: #FFFBCC;
border: 1px solid #999999; 
margin-bottom: 15px;
}
 
#espacio_1{
    background: #CCCCCC;
    border:1px solid black;
    width:200px;
    height:200px;
    
    
}
    
    
#espacio_2{
    border:1px solid black;
    width:200px;
    height:200px;
    
    
        }
 
#espacio_3{
    border:1px solid black;
    width:200px;
    height:200px;
    
    
        }
 
#espacio_4{
    border:1px solid black;
    width:200px;
    height:200px;
    
    
        }
 

[pzin]

¿Va a existir algún margen entre los dos div que ocupan cada fila? Porque si es mayor a 65 pixeles puedes resolverse de una manera y sino de otra.

[Verkia]

Añádeles una clase a los divs con las mismas reglas css, no hace falta que le asignes a cada una un ID.

Código HTML:

 <section id="seccion">
       
     <article>
          <div class="espacio">
           Este es el texto de mi primer mensaje
          </div>

          <div class="espacio">
           Este es el texto de mi segundo mensaje
           </div>

          <div class="clear"></div>

          <div class="espacio">
           Este es el texto de mi tercer mensaje
          </div>

          <div class="espacio">
           Este es el texto de mi cuarto mensaje
          </div>
        </article>
    </section> 

El div clear lo que hará será bajar los últimos dos divs abajo de los otros dos.

Código:

#seccion{
    padding: 20px 50px;
}

#seccion .espacio{
   float:left;
   width:50%;
   border:1px solid black;
   height:200px;
}

#seccion .clear {clear:both;}

Espero que te sirva, Un saludo!