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> 
