Comunidad de diseño web y desarrollo en internet online

Ayuda con margen en div anidado, muestra bien en ie6 .. WTF!

Citar            
MensajeEscrito el 24 Ago 2009 11:27 am
Hola que tal, resulta que despues de hurgar un rato en los <tags> de clab, me hice de una distribucion similar (pirata). Ahora bien, despues de la cabecera, tengo el cuerpo en un div contenedor que tiene a otros dos divs, con su marco dibujado por css.

El problema viene cuando aplico el marco al div contenedor; pareciera que encierra a los dos divs anidados en un area mas pequeña, y los corta con el margen, encimandose horrible, como si no existieran los divs que tiene dentro. Esto lo probe en chrome e ie6, y, sorprendentemente en ie6 me lo muestra "bien" (valga la definicion). Sé que con agregarle el <height> al div se arregla, pero quisiera saber si hay manera de hacerlo respetando el espacio que ocupan de por si los divs anidados, y de ser posible una explicacion de por qué hace eso. Una manita? Gracias!!

Este es el codigo de la pagina, y pueden ver como trabaja con el bendito "try it" de w3schools :

[url=http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width][/url]

Solo hay que reemplazar el codigo de la caja izquierda por el que esta aqui abajo.

Nota: espero que Freddier no se moleste por tomar partes de su codigo.


Código HTML :

<html>
<head>
<style type="text/css">
body
{   
   text-align:center;
}
div.arriba
{
//clear : both;
margin: 0px auto;
width:700px;
padding-top:8px;
padding-bottom:8px;
padding-left:10px;
padding-right:10px;
border:2px solid #0f0f0f;
font-color:#333333;
font-family:verdana;
}
div.arriba h1
{
align:center;
font-size:16pt;
}
div.conteneitor
{
   padding:10px;
   margin: 10px auto;
   width:600px;
   border:2px solid #000000;
}
div.izquierda
{
width:200px;
padding-top:8px;
padding-bottom:8px;
padding-left:10px;
padding-right:10px;
//margin:auto;
font-color:#333333;
font-family:verdana;
float:left;
text-align:left;
border:2px solid #0f0f0f;
}
div.izquierda h1
{
font-size:16pt;
}

div.derecha
{
width:300px;
font-family:verdana;
border:2px solid #32ffff;
float:right;
}
div.derecha h1
{
font-size:16pt
}
a:link {color:#336699}
a:visited {color:#333333}
a:hover {color:#336699};

</style>
<script type="text/javascript">
function setService(string)
{
//alert(document.getElementById("framer"));
document.getElementById("framer").src=string;
}
function stopPropagation(e) 
{ 
   alert(this.bubbles);
   e.cancelBubble;
   e.stopPropagation();
   e.cancelBubble = true; 
}  
</script>
<title>
</title>
<body>
<div class="arriba"><h1>Servicios</h1></div>
<div class="conteneitor">
   <div class="izquierda">
      <a href="#" onclick="setService('cdb.html');return false" onMouseUp="">Crear BD</a><br/>
      <a href="#" onclick="setService('ctabla.html');return false">Crear Tabla</a><br/>
      <a href="#" onclick="setService('idata.html');return false">Insertar campo</a><br/>
      <a href="#" onclick="">Extra</a><br/>
      <a href="#" onclick="">Extra</a><br/>
      <a href="#" onclick="">Extra</a><br/>
      <a href="#" onclick="">Extra</a><br/>
      <a href="#" onclick="">Extra</a><br/>
      <a href="#" onclick="">Extra</a><br/>
   </div>
   <div class="derecha">
   <iframe src="" id="framer" frameborder="0"> 
   </iframe>
   </div>
</div>
</body>
</html>

Por Mr_Anderson

151 de clabLevel



Genero:Masculino  

Terminaltor

chrome
Citar            
MensajeEscrito el 24 Ago 2009 06:04 pm
Haaa ya.
Es porque le tienes float a los dos divs dentro de conteneitor. Podes usar el famoso clear:both, o otra solución mas elegante que esta en el segundo link.

http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/
http://www.documentados.com/blog/oskar/como-trabajar-con-divs-sin-clearboth

Por gcm

Claber

557 de clabLevel

3 tutoriales

Genero:Masculino  

Diseñador Grafico y Web, Geek

msie8
Citar            
MensajeEscrito el 24 Ago 2009 11:52 pm
Si funciono:

Código HTML :

overflow:hidden


en conteneitor.

Gracias!

Por Mr_Anderson

151 de clabLevel



Genero:Masculino  

Terminaltor

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.