Foros del Web » Creando para Internet » CSS »

imagenes floats en bloques

Estas en el tema de imagenes floats en bloques en el foro de CSS en Foros del Web. Hola estoy intentando realizar una simple maquetacion como esta De la siguiente forma Código: #content { float: left; margin: 15px 0px 0 0px; line-height: 19px; ...
  #1 (permalink)  
Antiguo 13/07/2006, 10:02
 
Fecha de Ingreso: abril-2006
Mensajes: 47
Antigüedad: 11 años, 8 meses
Puntos: 0
imagenes floats en bloques

Hola estoy intentando realizar una simple maquetacion como esta



De la siguiente forma

Código:
#content {
	float: left;
	margin: 15px 0px 0 0px;
	line-height: 19px; 
	display: inline;
	width: 550px;
}

.screenshot_block {
	clear: left;
	margin-bottom: 24px;
	overflow: auto;
	background-color: #CCCCCC;
}

.screenshotleft {
  float: left;
  margin: 0 16px 0 0;
  display: inline; 
}
.screenshotright {
  float: right;
  margin: 0 0 0 16px;
  display: inline; 
}

.cliente {
font-size:110%;
}
Y con el siguiente html

Código:
<div id="content">
		  <div class="screenshot_block">
            <img src="logo.jpg" width="200" height="148" alt="Color Scheme Analyzer" class="screenshotleft" />
          <h4 class="cliente">Titulo 1 </h4>
          <p>blaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaablaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaablaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaablaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa</p>

          </div>
		  <div class="screenshot_block">
            <img src="logo.jpg" width="200" height="148" alt="Color Scheme Analyzer" class="screenshotright" />
          <h4 class="cliente">Titulo 2 </h4>
          <p>blaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa</p>

          </div>
		  <div class="screenshot_block">
            <img src="logo.jpg" width="200" height="148" alt="Color Scheme Analyzer" class="screenshotleft" />
          <h4 class="cliente">Titulo 3 </h4>
          <p>bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla</p>

          </div>
</div>
Pero no se porque en firefox se ve bien, como la imagen anterior pero en el explorer se me ve de la siguiente forma


a ver si me echais una ayuda, yo pensaba que esto seria lo que menos me costaría y me esta dando muchos dolores de cabeza

Saludos!
  #2 (permalink)  
Antiguo 13/07/2006, 16:04
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
HOLLY HACK

Código:
.screenshot_block {
	clear: left;
	margin-bottom: 24px;
	overflow: auto;
	background-color: #CCCCCC;
        _height:1%;
}
__________________
Internet Explorer SuckS
Download FireFox
  #3 (permalink)  
Antiguo 13/07/2006, 17:15
 
Fecha de Ingreso: abril-2006
Mensajes: 47
Antigüedad: 11 años, 8 meses
Puntos: 0
Muchas Gracias

Me ha funcionado perfectamente. Gracias

He estado leyendo sobre este hack, y habla de cuando se utiliza margin y padding a una misma capa, es cierto eso?
  #4 (permalink)  
Antiguo 13/07/2006, 18:17
 
Fecha de Ingreso: abril-2006
Mensajes: 47
Antigüedad: 11 años, 8 meses
Puntos: 0
Texto vertical

Hola de nuevo, es posible que el paragrafo que va acompañado de la imagen flotante , cuando sobrepase la altura de la imagen siga con el mismo margen que da la imagen y no siga el texto luego por debajo de la imagen?

Es decir una columna para la imagen y otra para el texto. (pero sin la necesidad de crear dos divs distintos uno para cada columna)

Gracias
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 05:23.