Foros del Web » Diseño web » CSS »

Separar dos divs

Estas en el tema de Separar dos divs en el foro de CSS en Foros del Web. Buenas tardes amigos, vuelvo a necesitaros Tengo un div contenedor, y dentro otros 2: una galería de imágenes , y un poco de texto. Lo ...
  #1 (permalink)  
Antiguo 19/06/2011, 10:43
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.063
Antigüedad: 4 años, 4 meses
Puntos: 309
Separar dos divs

Buenas tardes amigos, vuelvo a necesitaros
Tengo un div contenedor, y dentro otros 2: una galería de imágenes, y un poco de texto. Lo que quiero es que la galería quede a la izquierda y el texto a la derecha, y en medio una imagen de un línea en vertical para separarlos.
Hasta ahí todo bien, la cuestión es que no lo consigo El CSS del slider viene ya hecho así que no puedo meter mano, sólo para flotarlo a la izquierda y darle un poco de left para que no se pegue a la pantalla. El HTML es así:
Código HTML:
Ver original
  1. <div id="container">
  2. <div id="wowslider-container1">
  3. <!-- ... -->
  4. </div>
  5. <img src="../images/separador.png" id="separador" />
  6. <div id="info">
  7. <!-- Some text -->
  8. </div>
  9. </div>

Y el CSS:
Código CSS:
Ver original
  1. #container {
  2.  position:relative;
  3.  height:500px;
  4. }
  5.  
  6. #separador {
  7.  height:450px;
  8.  display:inline;
  9.  float:left;
  10. }
  11.  
  12. #info {
  13.  display:inline;
  14.  float:left;
  15. }
Sin embargo, queda todo muy descolocado. También probé a flotar a la derecha #separador y #info, pero se descolocan de manera similar. ¿Cómo puedo hacer esto? Como último recurso podría colocar el separador en horizontal y poner la información arriba o abajo, pero me gusta más de esta manera.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #2 (permalink)  
Antiguo 19/06/2011, 12:49
 
Fecha de Ingreso: febrero-2010
Ubicación: Montevideo
Mensajes: 105
Antigüedad: 4 años, 7 meses
Puntos: 19
Respuesta: Separar dos divs

Hola, por qué no pruebas darle display:block al separador y al text en lugar de inline, luego le pones un ancho según lo que necesites. También deberías flotar el primer div.

Si esto no te funciona también puedes darle posisión absoluta al separador, y al texto float:left. Luego posicionas el saparador donde te parezca que queda bien (ej. left: 300px)

También puedes usar la imagen del separador como fondo de uno de los divs.

Hay muchas formas de encarar los problemas en css, hay que averiguar cual es la mejor
__________________
Federico Silva Ponte
www.fedesilva.com
  #3 (permalink)  
Antiguo 20/06/2011, 09:39
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 286
Antigüedad: 4 años, 9 meses
Puntos: 45
Respuesta: Separar dos divs

Buenas,

la mejor opción es usar la imagen como fondo del div porque las imagenes que sólo se usan por razones estéticas y que no forman parte importante del contenido de la página no deberían ir nunca con la etiqueta img, en este caso es así porque parece que es un separador para que quede mas claro visualmente que no aporta nada al contenido y los elementos ya están bien definidos cada uno por su propia etiqueta supongo y agrupados en divs que son para eso pero de los que no conviene tampoco abusar.

No tiene mucho sentido aplicar el valor inline a la propiedad display de un elemento en bloque como #info y luego aplicar la propiedad float que lo va a convertir otra vez en elemento en bloque, es decir, cuando se aplica la propiedad float depende del valor declarado para la propiedad display, o de si no se ha declarado, o del tipo de elemento que sea , o incluso de si está posicionado absolutamente, será distinto el valor computado real que tomará el elemento para las propiedades display y float.

Lo más sencillo sería usar sólo dos divs, uno para la galeria y otro para #info flotados y poner la imagen de fondo en #info
  #4 (permalink)  
Antiguo 20/06/2011, 12:23
 
Fecha de Ingreso: febrero-2010
Ubicación: Montevideo
Mensajes: 105
Antigüedad: 4 años, 7 meses
Puntos: 19
Respuesta: Separar dos divs

Si, estoy de acuerdo con tecna. Tal vez tienes una razón para utilizar un tag como separador, pero lo mejor es dejárselo al css y aplicarlo con background.
__________________
Federico Silva Ponte
www.fedesilva.com
  #5 (permalink)  
Antiguo 20/06/2011, 12:30
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.063
Antigüedad: 4 años, 4 meses
Puntos: 309
Respuesta: Separar dos divs

Efectivamente, muchas gracias @fedesilva y @Tecna, coloqué el fondo a la derecha y floté los dos divs a la izquierda, me funcionó perfectamente.
Aquí el resultado.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #6 (permalink)  
Antiguo 20/06/2011, 12:44
 
Fecha de Ingreso: febrero-2010
Ubicación: Montevideo
Mensajes: 105
Antigüedad: 4 años, 7 meses
Puntos: 19
Respuesta: Separar dos divs

De nada, me alegro que te haya funcionado.

Saludos
__________________
Federico Silva Ponte
www.fedesilva.com

Etiquetas: divs
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 12:07.
SEO by vBSEO 3.3.2