Ayuda con 2 divs

Jarkaos · #1 (**permalink**) 13/01/2010, 07:10

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!!!

valenti_92 · #2 (**permalink**) 13/01/2010, 07:47

Prueva de ponerle position:relative y display:block a los dos.

C2am · #3 (**permalink**) 13/01/2010, 08:34

Flotandolo a la derecha tal vez. O sacandolo ese div "texto", dejandolo dentro del div padre.

Jarkaos · #4 (**permalink**) 13/01/2010, 11:01

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!!

C2am · #5 (**permalink**) 13/01/2010, 17:20

Muestra el código que utilizas así te podemos ayudar mejor.
Saludos

Jarkaos · #6 (**permalink**) 14/01/2010, 03:40

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%;*/
	}

C2am · #7 (**permalink**) 14/01/2010, 05:23

Prueba lo siguiente:
quitale el float a .cs9ProductDescription

Saludos

PD: probe con dos alternativas:
http://www.puebloyreforma.org.ar/fdw/Untitled-1.html

Jarkaos · #8 (**permalink**) 14/01/2010, 07:22

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

C2am · #9 (**permalink**) 14/01/2010, 07:43

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.cs9ProductDescription2 {
    display: block;
    border: 1px solid #DDDDDD;
    position: relative;
    margin-left: 175px; /*width: 60%;*/
    background-color: #6C6;
    }

Y el resultado sería:

Saludos

JavierB · #10 (**permalink**) 14/01/2010, 08:42

Hola Jarkaos

Muevo tu tema al foro de CSS desde Web general.

Saludos,

alexk · #11 (**permalink**) 14/01/2010, 21:50

div = display: block;
elemento bloque :S