Divs, uno a la par del otro, sin float.

[HackmanC]

Hola,

Agradecería si alguien pudiera ayudarme; en este caso tengo 2 'divs' consecutivos y salen uno abajo del otro. ¿Cual es el procedimiento para que se desplieguen uno a la par del otro?.

He leido algo de 'float', pero no me calcula los márgenes, tengo que sumarle al margen izquierdo de Maps-Notes el ancho de Maps-Image para ponerle margen. ¿Existe alguna forma de hacerlo sin float?. ¿Cual es la forma adecuada de hacerlo?.

Código:

div.Maps-Image {
	text-align: right;
	height: 256px;
	width: 256px;
}
div.Maps-Notes {
	text-align: left;
	height: 256px;
	width: auto;
}

  <div class="Maps-Image"><img src="Garden.jpg" alt="" /></div>
  <div class="Maps-Notes">Garden</div>

Me imagino que ha de ser un tema muy común, pero no encuentro la información y estaba acostumbrado a realizarlo con 'tables'.

Gracias,

[kseso?]

añade a cada uno la propiedad

display:inline;

y para separarlos (dejar un espacio entre div´s) con margin

[HackmanC]

Hola,

Gracias por responder, y adémas por ser tan rápido, no conocía el display: inline. Perdón, creo que el ejemplo que puse anteriormente no fue el mejor, puesto que son varias líneas en Maps-Notes. Mi código real es este... realmente son solo 27 líneas en todo mi HTML (dentro de un XSLT).

Código:

<div class="Maps-Image"><img src="Garden.jpg" alt="" /></div>
<div class="Maps-Notes">Garden<br />1,256 mts.</div>

En este caso cuando le pongo display: inline, el valor 1,256 mts. aparece abajo de la imágen, es decir ...

Código:

Imagen | Garden
1,256 mts.

Y deseo que sea ...

Código:

Imagen | Garden
______ | 1,256 mts.

¿Existe algún otro método? ¿O algún metodo para poner multiples líneas, sin que aparezca bajo la imagen?

Gracias de nuevo,

ps:

Debo esparcir algo de karma, antes de darle de nuevo a kseso? !
Te debo el karma ... gracias !

[kseso?]

Bueno, HackmanC, no estoy seguro de haberte entendido bien (problema de mi horario, ).
Lo que quieres es tener una imagen a la izquierda, y a su derecha y centrado en la vertical respecto a ella que aparezcan unos datos (tipo de solar y superficie). O ¿Cierto?
Pues encierra todos esos div en un contenedor con "display: table"
"Maps-Image" y "Maps-Notes" con "display: table-cell" y éste último con "vertical-align:middle"

No se si será esto lo que necesitas. Si hoy cuando amanezca sigues sin resolverlo, lo miro algo más.

Creo que esto último lo he escrito de dormido

Para informarte algo más sobre el tema:
http://www.librosweb.es/css_avanzado...d_display.html

Edito:
Por lo del karma, naahh! porque ya decían:
Aleluya por la alerta, mas pregunto, si no es ofensa: ¿cuánto karma he de esparcir antes de poder repetir?

[HackmanC]

Hola,

Gracias de nuevo kseso?; según lo que entendí de ese documento debería funcionar correctamente. Por mala suerte no es así; porque Internet Explorer 7.0.5730.13 no me despliega correctamente el table, table-row, table-cell (sigue desplegando uno abajo del otro); y creo que de allí viene el problema, pero igual muchas gracias, creo que en este proyecto voy a regresar a usar tables, aunque me gustaría llegar a conocer una manera de realizarlo, para referencia futura.

Lo que escribiste es exactamente lo que quiero hacer... es decir ...

<table>
<tr><td><img src='abc...'></td><td>abc<br>def</td></tr>
<tr><td><img src='abc...'></td><td>abc<br>def</td></tr>
</table>

¿Como logro un efecto exactamente igual con divs en CSS? La segunda celda puede contener cuantos <br> sea necesario y nunca van a desplegarse debajo del <img>. Actualmente sin 'display' se despliega la imágen arriba y el texto abajo; con 'display: inline', como me aconsejabas al principio, se despliega así :

IMAGEN
IMAGEN
IMAGEN
IMAGEN Esta es una imágen y
este texto no cabe y se bajo una
línea y está debajo de imágen.

Y quisiera saber como desplegarlo así:

IMAGEN Esta es una imágen y
IMAGEN este texto no se bajo una
IMAGEN línea y está a la par de imágen.
IMAGEN

La palabra IMAGEN repetida, representa 1 sola imágen.

Sería perfecto que funcionara el 'display: table' en IE7, así quedaría resuelto, pero necesito que funcione en la mayoría de browsers.

Gracias de nuevo,
Saludos,

[kseso?]

Ya lo siento, a ver si con algo de suerte mañana encontramos cómo salvarte de las tablas ;)

ummmh! Si lo que quieres hacer es presentar una serie de datos tabulados, que precisamente es la función de las tablas, ¿por qué nos empeñamos tú y yo en librarte de ellas?
Sólo tienes que definir los estilos de dichas tablas mediante css para quedar a bien con los puristas, jeje
Es cierto, estoy

[HackmanC]

Tienes toda la razón !!!
¿Por qué queria eliminarlas?
¿Que tienen de malo en este caso?
Realmente son datos tabulados de XML

Gracias, creo que eso era lo que necesitaba, es más fácil en este caso así, y queda bien, no sé por qué quería eliminarlas.