ayuda centrar subsection sin float

Hola buenos dias bueno tengo aqui un section donde dentro tengo 2 section mas, pero quiero que uno siempre este a la izquierda y el otro este a la derecha con el mismo margen que el section 1 y estos esten centrados, pero quiero realizarlo sin el float, tambien lo manejo con % por la parte de las resoluciones, en el primer section va a ir unos anuncios chicos y en el segundo section va a ir un anuncio rotando, que me recomiendan que use % o en px ? por el ancho, gracias pongo mi codigo

index.html

Código :

<section id="anuncio">
         <section id="anuncio_izq">
            dd
         </section>
         <section id="anuncio_der">
            dd2
         </section>
         
      </section>

css

Código :

#anuncio
{
   background: #FFF;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
   border-radius: 1em;
   margin: 1em auto;
   min-height: 380px;
   width: 90%;

}

#anuncio_izq
{
   background: #99CCCC;
   border-radius: 1em;
   display: inline-block;
   margin: 1em 1em;
   padding: 1em 0;
   min-height: 370px;
   vertical-align: top;
   width: 20%;
   
}

#anuncio_der
{
   background: #333333;
   border-radius: 1em;
   display: inline-block;
   margin: 1em auto;
   padding: 1em 0;
   min-height: 370px;
   vertical-align: middle;
   width: 70%;

}

No uses porcentajes y usa float. Tu primer section es tu contenedor, de ahí haz que flote a la derecha o la izquierda y tengan el ancho que cubra el contenedor relativamente.

Suerte.

los porcentajes son valores relativos, que son dificiles de controlar, es más práctico usar valores absolutos como indica kinduff.

en cuanto a linear... hay tres soluciones, pero realmente no se cual es la mejor, según casos.

1._ es con float
2._ usando una tabla
3._ usando el estilo display:inline (este suele tener problemas con MIExplorer)

Silvestre_ escribió:

bueno es una opción, yo no soy de usar tablas y se ha escrito mucho.... yo además nunca fue de usar tablas incluso cuando hace mas de 10 años se creian los "expertos" que eso era el santo grial.
No obstante actualmente vuelven algunos defensores de ellas... y como te decia no soy defensor de ellas...(no suelo usarlas en ningun diseño), es verdad que al cargar la página fuerzan a cuadrar el diseño pro decirlo de alguna manera... y algo será cuando siguen existiendo en html5. por contra los floats pierden su lugar privilegiado en HTML5

Silvestre_, las tablas existen en HTML5 (y continuarán existiendo) porque tienen una función: mostrar datos tabulados, no porque sean una forma válida de dar formato a un sitio. Por otro lado, el uso de inline-block resuelve el problema de caja que presenta float, por eso su uso popular en CSS3.
Igual puedes usar float en este caso, ldguzma, sólo asegúrate de agregar al contenedor "overflow:auto" u "overflow:hidden", que resuelve el problema de caja de los float, otra forma válida es usar la regla de cálculo que se usa en Responsive Web Design para crear los grid fluídos:

Código :

valor (%) = ancho_contenedor / ancho_elemento * 100

Otra opción es usar tablas pero sin usar tablas

Me explico, por medio de display: table puedes hacer que los bloques se comporten como tablas, si quieres que se comporte como columnas entonces usas table-column, como celdas table-cell y asi sucesivamente.

Más Información

The Fricky!, yo no uso tablas pero a veces podria ser una solución, repito no uso y creo que no usaré nunca... otra cosa es el inline-block, pero sigo viendo errores con el miexplorer.. o es que hago algo mal?

Lo que ocurre es que las versiones de IE anteriores a la 9 no soportan inline-block o inline-table, etc. En esos casos la única solución en CSS es usa float, por eso los errores en IE.
En cualquier caso, la capa de presentación corresponde a CSS, no a HTML. Por eso lo de evitar usar tablas para dar formato al contenido.