Separar dos divs

[_cronos2]

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:

<div id="container">
<div id="wowslider-container1"> 
<!-- ... -->
</div>
<img src="../images/separador.png" id="separador" />
<div id="info">
<!-- Some text -->
</div>
</div>
 

Y el CSS:

Código CSS:

#container {
 position:relative;
 height:500px;
}
 
#separador {
 height:450px;
 display:inline;
 float:left;
}
 
#info {
 display:inline;
 float:left;
}
 

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 (:

[fedesilva]

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

[Tecna]

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

[fedesilva]

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.

[_cronos2]

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 (:

[fedesilva]

De nada, me alegro que te haya funcionado.

Saludos