Aquí va el código CSS
Código PHP:
body{
font-family:Arial, Helvetica, sans-serif;
background: #E0D5B7 url(images/page_bg4.jpg) 0 0 repeat-x;
}
#detalles{
float:left;
width:95%;
height:740px;
}
.detallesizquierda{
clear : both; /*Sin esto se descoloca en IE*/
color: #5d5d5d;
float:left;
width:80%;
}
.noticias{
width:97%;
height: auto;
}
.titulo{
background: #1bf;
font-size: 12px;
height: 40px;
}
#personales{
width:auto;
height: 140px;
}
.imagen{
background: #fff;
float:left;
width:92px;
height: 99px;
}
.textonoticia{
background: #fff234;
float:right;
width:auto;
color:#000000;
height:auto;
}
.detallesderecha{
background: #1ff234;
float:right;
width:170px;
}
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sitio - Prueba</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="detalles">
<div class="detallesizquierda">
<div class="noticias">
<div class="titulo">
<h1>Titulo</h1>
</div> <!--titulo end -->
<div id="personales">
<div class="imagen">
<img src="0.gif" alt="Pic 0" >
</div> <!--imagen end -->
<div class="textonoticia"> <!--noticia start -->
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div> <!--textonoticia end -->
</div> <!--personales end -->
</div> <!--noticias end -->
</div> <!--detallesizquierda end -->
<div class="detallesizquierda">
<div class="noticias">
<div class="titulo">
<h1>Titulo</h1>
</div> <!--titulo end -->
<div id="personales">
<div class="imagen">
<img src="0.gif" alt="Pic 0" >
</div> <!--imagen end -->
<div class="textonoticia"> <!--noticia start -->
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div> <!--textonoticia end -->
</div> <!--personales end -->
</div> <!--noticias end -->
</div> <!--detallesizquierda end -->
<div class="detallesderecha">
<IMG height=160 width=160 src="images/1.gif" alt="Pic 1" border=1/>
<IMG height=160 width=160 src="images/1.gif" alt="Pic 2" border=1/>
<IMG height=160 width=160 src="images/1.gif" alt="Pic 3" border=1/>
</div> <!--detallesderecha end -->
</div> <!--detalles end -->
</body>
</html> Mis preguntas:
- Si bien en IE7 se ve como Yo quiero (o sea está perfecto) pero en el DISEÑO con DreamWeaver APARECE DESOLOCADO la columna de la derecha. Quizás me digan: lo importante es el resultado de como se ve la página en Internet, bien, pero como estoy empezando con el diseño de capas (DIVs) este efecto de descolocación me hace confundir si voy a continuar diseñando colocando otros elementos dentro de la página mía. ¿Qué hacer para que no se vea descolocado en el DISEÑO?
Todo lo anterior mencionado ocurre cuando agrego otro idéntico <div class="detallesizquierda"> (copia) con todo su contenido, ya que con una sola (sin copias) me muestra muy bien las flotaciones.
- Con relación a la anterior pregunta hice correr el código en FIREFOX y con sorpresa pude observar que todos los elementos se descolocan y la columna de la derecha casi ni la veo. Mi objetivo final es COPIAR varios bloques de <div class="detallesizquierda"> con todo su contenido en la izquierda y en la parte de la derecha exista otro bloque de gráficos. ¿Cómo solucionar este código para que se vean normal en IE7 y FireFox?
Saludos