Colocar los DIV´s Horizontales (Uno despues de otro)

[1antares1]

Hola amigos, ya estoy más morado que al tratar de colocar 2 cuadros DIV con contenido dentro, que queden 1 despues del otro, pero horizontal y no vertical.

Para colocar mis publicidades, me quedaron asi:







Pero yo quisiera que quedara asi:






Es decir, que quedaran los DIVS uno despues del otro, pero horizontal.

Mi estilo está así:

Código CSS:

.post_campo {
    background: #fff url(images/styles/CrystalClean/style/postfieldBG.gif) repeat-x bottom left;
    color: #546c7e;
    border: 1px solid #cfdde9;
    padding: 3px 3px 3px 10px;
    margin-top: 2px;
        height:250px;
        width:300px;
    text-align:left;
}
.post_campo strong {
    color: #854f99;
}
.post_campo dt {
    color: #854f99;
    font-weight:700;
}
 
.post_camp {
    background: #fff url(images/styles/CrystalClean/style/postfieldBG.gif) repeat-x bottom left;
    color: #546c7e;
    border: 1px solid #cfdde9;
    padding: 3px 3px 3px 10px;
    margin-top: 2px;
        height:250px;
        width:300px;
    text-align:left;
}
.post_camp strong {
    color: #854f99;
}
.post_camp dt {
    color: #854f99;
    font-weight:700;
}
 
 
 
 
.post_campo2 {
    background: #fff url(images/styles/CrystalClean/style/postfieldBG.gif) repeat-x bottom left;
    color: #546c7e;
    border: 1px solid #cfdde9;
    padding: 3px 3px 3px 10px;
    margin-top: 2px;
        height:50%;
        width:80%;
    text-align:center;
        
}
.post_campo2 strong {
    color: #854f99;
}
.post_campo dt2 {
    color: #854f99;
    font-weight:700;
}
 

Y mi sintaxis, está asi:

Código HTML:

<div class="post_campo2">
 
 
<center><div class="post_campo"><script type="text/javascript"><!--
google_ad_client = "pub-8597137703225965";
/* 300x250, creado 11/07/10 */
google_ad_slot = "8672443388";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
 
<div class="post_camp"><!-- BEGIN SMOWTION TAG - 300x250 - latinort: juegos - DO NOT MODIFY -->
<script type="text/javascript"><!--
smowtion_size = "300x250";
smowtion_section = "763528";
//-->
</script>
<script type="text/javascript"
src="http://ads.smowtion.com/ad.js">
</script>
<!-- END SMOWTION TAG - 300x250 - latinort: juegos - DO NOT MODIFY --></div></center>
 
 
</div>
 

Bueno, tengo 2 DIV diferentes, pero con el mismo estilo y aún, también probe los 2 contenidos con el mismo DIV CLASS campo y aún, me seguia estando verticalmente.

¿Se podría utilizar el CoolSpan y RowSpan?


A ver si podrían ayudarme a colocarlo vertical. Muchas gracias, espero sus respuestas :(

[Carlangueitor]

Solo agrega float: left; a .post_camp y cuentas que tal.

Saludos

[1antares1]

Hola amigo, gracias por la ayuda.

Pues, consegui otro codigo y pude agregar algunos estilos, pero ahora los DIV de cuadritos, me quedan todos alineados a la izquierda.

Es como algo complicado (Digo para mi), por que si quiero centrar 1, los otros 2 se quedan abajo.

Quisiera centar los 3 DIV diferentes, pero que los 3 queden en el centro horizontalmente.

¿Se podria hacer?

Por ahora los tengo asi:




Me gustaria centrarlos, aqui esta el codigo de los estilos utilizados:

Código CSS:

.contenedor-banner-item {
    float:left;
        padding:0;
        margin:0 auto;
 
}
 
.banner-item-300-250 {
    width:300px;
    height:250px;
        margin:auto;
    margin-left:11px;
    margin-top:46px;
}
 
.banner-item-300-250-izquierda {
    background:url(images/fondo-banner.jpg);
    background-repeat:no-repeat;
    width:322px;
    height:318px;
    float:left; 
        text-align:center;
    margin-left:10px;
}
 
.banner-item-300-250-centro {
    background:url(images/fondo-banner.jpg);
    background-repeat:no-repeat;
    width:322px;
    height:318px;
    float:left; 
        text-align:center;
    margin-left:10px;
}
 
.banner-item-300-250-derecha {
    background:url(images/fondo-banner.jpg);
    background-repeat:no-repeat;
    width:322px;
    height:318px;
    float:left; 
        text-align:center;
    margin-left:10px;
}
 

Yo quite el contenedor y no me afecto. Creo que no me sirve. O tengo que dejarlo?

Gracias por sus respuestas y ayuda.

[jomaruro]

Hola:

Mejor déjalo e intenta centrarlos utilizando margin y padding o dandole un width de 33%.

Saludos.

[luxito]

Tambien ten encuenta que si la resolucion de pantalla es mas pequeña, los div saltaran y se colocaran a abajo.

[1antares1]

Exacto, los modifique con magin-left a 3%, para que en monitores de 1024, se vea exacto...

Pero lo que quiero exactamente, esté centrado, aunque la ventana se vaya agrandando, los banners se van colocando en el centro y no se queden a la izquierda, no se si me explico.

Si los veo en mi monitor de 1440x900, los div´s estan a la izquierda. No se por que se maneja asi.

¿Hay algun codigo HTML o modificar el CSS, para que siempre estén centrados?

Muchas gracais desde ya y disculpen mi antojo. :(