Ayuda con Capas... colocar en una línea 2 divs

cehojac · #1 (**permalink**) 04/06/2008, 15:54

Lo admito... soy un dinosaurio de las tablas...

estoy aprendiendo a usar los DIVs y ya tengo un problema. me imagino que es una tontería pero no veo el fallo

ahi va el código

Código PHP:

 
<div class="middle">

            <? //aqui va contenido central //?>

          <div class="foto"><img src="imagenes/asesoria.png" width="193" height="303" alt="asesoría informática" /><div>

           <div class="resumen">

          texto

            </div>

           <? //fin de contenido central // ?>         

               </div>

el problema es que quiero que los divs se coloquen de forma horizontal uno detras de otro asi:

+---middle-------------+
| [foto][resumen] |
+------------------------+

sin embargo me sale asi

+---middle-------+
| [foto] |
| [resumen |
+------------------+

pongo el código css

Código PHP:

  .middle

{

 
width:800px;

background-color:#00A1DB;

}

 
.foto{

padding:0px;

width:193px;

height:303px;

}

 
.resumen{

 
padding-left:15px;

padding-top:15px;

width:550px;

height:320px;

background-image:url(../imagenes/minifondo.png);

background-repeat:no-repeat;}

Gracias por la ayuda

Mikmoro · #2 (**permalink**) 04/06/2008, 16:11

Puedes añadir:

.foto, .resumen { float: left;}

a tu css.

Mikel.

cehojac · #3 (**permalink**) 04/06/2008, 16:23

ya lo he colocado y nada... es más middle ha dejado de mostrar su color de fondo.

Mikmoro · #4 (**permalink**) 04/06/2008, 16:30

Middle ha dejado de mostrar su fondo porque como no tiene altura, al tener las capas flotadas dentro no crece para albergar su contenido. Lo que me extraña es que no se hayan colocado una al lado de la otra.

EDITO.

Mikmoro · #5 (**permalink**) 04/06/2008, 16:41

No, no, perdón. Debes poner:

.foto img {float: left;}

No había leido bien tu código.

Mikel.

cehojac · #6 (**permalink**) 05/06/2008, 01:32

Cita:

Iniciado por Mikmoro

No, no, perdón. Debes poner:

.foto img {float: left;}

No había leido bien tu código.

Mikel.

Hola mikel muchas gracias por tu ayuda. de momento con el float en la imagen sale asi:

+---middle-------------+
| [foto]umen] |
+------------------------+

en otras palabras, resumen se pone debajo de foto. ademas fuera hay un div inferior que se ha descuadrado. mando el código completo mejor

Código PHP:

 
<body>

<div class="contenedor_principal">

    <div class="contenedor_central">

      <div class="cabecera">

           <div class="google_adsense">

                contenido...          

        </div>

            <div class="menu">

                 contenido...

                </div>        

      </div>

 <div class="cuerpo">

            <div class="sup">

            </div>

            <div class="middle">

            <? //aqui va contenido central //?>

          <div class="foto">

           <img... >

          <div>

           <div class="resumen">

            contenido... </div>

           <? //fin de contenido central // ?>         

               </div>

           

            <div class="down">

            </div>

        </div>

    </div>

</div>

<div class="publi">

    contenido...

</div>

</body>

y aqui el css completo:

Código PHP:

  body{

padding:0 0 0 0;

border-spacing:0px;

border-top:0px;

border-style:none;

background-color:#CCCCCC;}

 
.contenedor_principal

{

width:100%;

padding:0 0 0 0;

 
 
height:100%;

}

 
.contenedor_central

{

position:static;

top:auto;

width:800px;

margin:0 auto;

}

 
.cabecera

{

width:800px;

height:251px;

background-image:url(../imagenes/cabecera.png);

background-repeat:no-repeat;

}

 
.google_adsense

{

width:480px;

height:60px;

padding-top:130px;

padding-left:60px;

}

 
.menu{

padding-top:30px;

margin-left:0px;

padding-left:15px;

 
}

.cuerpo{

padding-top:15px;

padding-bottom:0px;

width:800px;

background-color:trasparent;}

 
.sup

{

width:800px;

height:15px;

background-image:url(../imagenes/sup.gif);

background-repeat:no-repeat;

}

 
.middle

{

 
width:800px;

background-color:#00A1DB;

}

 
.foto{

 
padding:0px;

width:193px;

height:303px;

}

 
.foto img{

float:left;

}

 
.resumen{

stress:inherit;

padding-left:15px;

padding-top:15px;

width:580px;

height:320px;

background-image:url(../imagenes/minifondo.png);

background-repeat:no-repeat;}

 
.down{

width:800px;

height:15px;

background-image:url(../imagenes/down.gif);

background-repeat:no-repeat;}

 
.publi{

padding-top:20px;

position:static;

width:480px;

top:auto;

margin:0 auto;

}

Muchas Gracias

Mikmoro · #7 (**permalink**) 05/06/2008, 17:29

¿No lo puedes subir a algún sitio? es que sin las imágenes me resulta imposible imaginar qué es lo que estás queriendo hacer.

Mikel.

cehojac · #8 (**permalink**) 06/06/2008, 10:23

Cita:

Iniciado por Mikmoro

¿No lo puedes subir a algún sitio? es que sin las imágenes me resulta imposible imaginar qué es lo que estás queriendo hacer.

Mikel.

te dejo la web aunque ya le he puesto tablas... (que se le va a hacer)

http:///www.carlos-herrera.com/empresas/asesoria.php

un saludo

Mikmoro · #9 (**permalink**) 06/06/2008, 10:38

Bueno, pues si has cambiado de idea no hace falta mucho más.

De todas maneras, eso es bastante sencillo: cuando flotas el elemento de la izquierda, si en el de la derecha sólo va a ir texto no es necesario hacer nada, pero si va a llevar algún tipo de fondo, lo que debes hacer es dar a ese bloque de la derecha un margen izquierdo igual al ancho del bloque de la izquierda más los márgenes que pensaras dejar entre ellos. Es algo muy habitual.

En el caso que nos ocupaba, sería:

.foto img {float: left;}
.resumen {margin-left: 200px;}

Al margen del resto de estilos que tuvieras.

Esto suele hacerse así, pero todo depende de caso concreto para adaptarlo.

Pronto has tirado la toalla.

Mikel.