Foros del Web » Creando para Internet » CSS »

Ayuda con 2 divs

Estas en el tema de Ayuda con 2 divs en el foro de CSS en Foros del Web. Hola, Estoy intentando crear un html para mostrar una foto y un texto. La foto se encuentra en su propio div y esta flotando hacia ...
  #1 (permalink)  
Antiguo 13/01/2010, 07:10
 
Fecha de Ingreso: noviembre-2002
Ubicación: Suecia
Mensajes: 253
Antigüedad: 15 años
Puntos: 2
Ayuda con 2 divs

Hola, Estoy intentando crear un html para mostrar una foto y un texto.

La foto se encuentra en su propio div y esta flotando hacia la izquerda con un ancho de 170px. Luego tengo un div que contiene el texto y este esta tambien flotando hacia la izquera pero no tiene un ancho fijo.

Cuando veo los div en IE todo esta ok, pero en Firefox el div con el texto se muestra debajo de la imagen (puesto que no tiene un ancho fijo).

Yo se que con un ancho fijo el div se mostraria al lado de la imagen pero el div con el texto tiene que tener un ancho variable, este ancho dependera del div que contiene al de la imagen y el texto.

Como puedo hacer para que el div con el texto siempre se muestre al lado de la imagen?

Gracias!!!
  #2 (permalink)  
Antiguo 13/01/2010, 07:47
Avatar de valenti_92  
Fecha de Ingreso: enero-2010
Ubicación: Manresa
Mensajes: 126
Antigüedad: 7 años, 11 meses
Puntos: 4
Respuesta: Ayuda con 2 divs

Prueva de ponerle position:relative y display:block a los dos.
  #3 (permalink)  
Antiguo 13/01/2010, 08:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Ayuda con 2 divs

Flotandolo a la derecha tal vez. O sacandolo ese div "texto", dejandolo dentro del div padre.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 13/01/2010, 11:01
 
Fecha de Ingreso: noviembre-2002
Ubicación: Suecia
Mensajes: 253
Antigüedad: 15 años
Puntos: 2
Respuesta: Ayuda con 2 divs

Valenti_92: esa solucion ya la he probado pero no ejerce ningun efecto en Firefox.

C2am: No puedo utilizar float: right, esa es una de las condiciones que hace que sea tan complicado.


Seguire intentando de todas maneras

Gracias!!
  #5 (permalink)  
Antiguo 13/01/2010, 17:20
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Ayuda con 2 divs

Muestra el código que utilizas así te podemos ayudar mejor.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 14/01/2010, 03:40
 
Fecha de Ingreso: noviembre-2002
Ubicación: Suecia
Mensajes: 253
Antigüedad: 15 años
Puntos: 2
Respuesta: Ayuda con 2 divs

Este es el html:

Código:
<html>
<head>
<title>TAbbs</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>

<body>
	<div class="packages">
		<div class="cs9ProductContainerPackage">
			<div class="cs9ProductInformationArea">
				<div class="cs9ImagePro">
					<img src="images/park_plaza.jpg" alt="produkt"></img>
				</div>
				<div class="cs9ProductDescription">
					<div class="cs9Header">
						<h1>TEST HOTELL</h1>
					</div>
					<div class="cs9Descr">
						<p>Väl placerad hotell av högsta kvalitet som gör dina semester eller 
						affär resa till en dröm Väl placerad hotell av högsta kvalitet som gör 
						dina semester eller affär resa till en dröm Väl placerad hotell av högsta 
						kvalitet som gör dina semester eller affär resa till en dröm Väl placerad 
						hotell av högsta kvalitet som gör dina semester eller affär resa till en 
						dröm Väl placerad hotell av högsta kvalitet som gör dina semester eller 
						affär resa till en dröm Väl placerad hotell av högsta kvalitet som gör 
						dina semester eller affär resa till en dröm
						kvalitet som gör dina semester eller affär resa till en dröm Väl placerad 
						hotell av högsta kvalitet som gör dina semester eller affär resa till en 
						dröm Väl placerad hotell av högsta kvalitet som gör dina semester eller 
						affär resa till en dröm Väl placerad hotell av högsta kvalitet som gör 
						dina semester eller affär resa till en dröm</p>
					</div>
					<div class="cs9InfoLinks">
						<a href="#">Visa på karta</a>
					</div>
				</div>
				<div style="clear: both;"></div>
			</div>
		</div>
		
	</div>
</body>
</html>
Y este es el css:

Código:
h1 {
	font-size: 14px;
}

.packages {
	border: 1px solid #DDDDDD;
	width: 660px;
}

.cs9ProductContainerPackage {
	margin: 5px;
}

.cs9ImagePro {
	display: block;
	float: left;
	margin-right: 10px;
	width: 155px;
	position: relative;
}

.cs9ImagePro img {
	width: 155px;
}

.cs9ProductDescription {
	display: block;
	float: left;
	border: 1px solid #DDDDDD;
	position: relative;
	/*width: 60%;*/
	}
  #7 (permalink)  
Antiguo 14/01/2010, 05:23
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Ayuda con 2 divs

Prueba lo siguiente:
quitale el float a .cs9ProductDescription

Saludos

PD: probe con dos alternativas:
http://www.puebloyreforma.org.ar/fdw/Untitled-1.html
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #8 (permalink)  
Antiguo 14/01/2010, 07:22
 
Fecha de Ingreso: noviembre-2002
Ubicación: Suecia
Mensajes: 253
Antigüedad: 15 años
Puntos: 2
Respuesta: Ayuda con 2 divs

Gracias, la segunda opcion es la mas acertada. No entiendo como no se me ocurrio probar con el margin-left en cs9ProductDescription2.

Bueno, a veces tanto mirar el codigo uno termina de verlo.

Gracias nuevamente
  #9 (permalink)  
Antiguo 14/01/2010, 07:43
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Ayuda con 2 divs

Me alegro que hayas solucionado tu problema
Dejo el css al cual haces referencia por si le sirve a alguien más, ya que borrare el archivo del link que te deje antes, porque lo voy usando para probar y responder en FDW, y luego el que lea no va a entender nada.

Código CSS:
Ver original
  1. .cs9ProductDescription2 {
  2.     display: block;
  3.     border: 1px solid #DDDDDD;
  4.     position: relative;
  5.     margin-left: 175px; /*width: 60%;*/
  6.     background-color: #6C6;
  7.     }

Y el resultado sería:


Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #10 (permalink)  
Antiguo 14/01/2010, 08:42
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola Jarkaos

Muevo tu tema al foro de CSS desde Web general.

Saludos,
  #11 (permalink)  
Antiguo 14/01/2010, 21:50
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Ayuda con 2 divs

div = display: block;
elemento bloque :S

Etiquetas: Ninguno
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 19:16.