Foros del Web » Creando para Internet » CSS »

Descuadre de divs

Estas en el tema de Descuadre de divs en el foro de CSS en Foros del Web. Hola, tengo la siguiente estructura de divs y la quiero convertir a la que indica la flecha: El codigo que tengo es el siguiente: Código: ...
  #1 (permalink)  
Antiguo 29/12/2006, 17:18
Avatar de shakaran  
Fecha de Ingreso: agosto-2005
Ubicación: España - Ciudad Real
Mensajes: 374
Antigüedad: 12 años, 4 meses
Puntos: 7
Descuadre de divs

Hola, tengo la siguiente estructura de divs y la quiero convertir a la que indica la flecha:



El codigo que tengo es el siguiente:

Código:
<div id="header" style="border:1px solid green; height:105px; width:990px">

<div style="width:210px; height:85px; border:1px solid #CCCC00">
hola
</div>

<div style="width:468px; height:60px; border:1px solid #CCCC00;">
	adios
</div>
Como ven todo esta dentro de un "header" y lo que me gustaria es que no se produjera el salto de linea despues del primer div para que el segundo estuviera alieneado con el. No me vale que sean span, porque necesito que tengan esos tamañanos. He probado con page-break-before y after pero nada.

Mi remedio cutre ha sido este:

Código:
<div id="header" style="border:1px solid green; height:105px; width:990px">

<div style="position: relative;width:210px; height:85px; border:1px solid #CCCC00">
hola
</div>

<div style="position:relative;left:211px;top:-85px;width:468px; height:60px; border:1px solid #CCCC00;">
	adios
</div>
Es decir, he puesto los divs a tratar como relativos al header y he "reajustado" la posición del div segundo con el left y el top.

El verdadero problema es que tengo 4 bloques asi mas y claro ir calculando todas las posiciones es un engorro, ademas de que no creo que sea una solución elegante. Por eso recurro a vuestra ayuda, a ver si me podeis decir si existe una manera mas elegante de hacer esto.

Un saludo.
__________________
Quijost Backend Engineer - www.quijost.com - Hosting rápido, eficiente y profesional
Blog: www.shakaran.net
  #2 (permalink)  
Antiguo 29/12/2006, 18:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Descuadre de divs

Añade un float:left a cada div y listo:

<div id="header"
style="border: 1px solid green; height: 105px; width: 990px;">
<div
style="border: 1px solid rgb(204, 204, 0); width: 210px; height: 85px; float: left;">hola
</div>
<div
style="border: 1px solid rgb(204, 204, 0); width: 468px; height: 60px; float: left;">
adios
</div>
</div>

Mikel.
  #3 (permalink)  
Antiguo 29/12/2006, 20:36
Avatar de shakaran  
Fecha de Ingreso: agosto-2005
Ubicación: España - Ciudad Real
Mensajes: 374
Antigüedad: 12 años, 4 meses
Puntos: 7
Re: Descuadre de divs

oks gracias ;) Me ha funcionado correctamente.

Un saludo.
__________________
Quijost Backend Engineer - www.quijost.com - Hosting rápido, eficiente y profesional
Blog: www.shakaran.net
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:14.