Ayuda con una tonteria en HTML (Divs + CSS)

Pues es una tonteria de ejemplos/trabajo cutre para clase, el profesor esta emperrado en que quiere que veamos todo desde los antiguos frames (ya vistos) y tablas (ya vistas) y ahora quiere un ejemplo de un iframe antes de pasar a las capas totalmente.

Generalmente trabajamos con HTML 4.1 Strict pero como es un ejemplo de iFrame y el Strict no lo acepta estamos usando Transicional (esto solo es el para el tema de validacion).

La cosa esque de css estoy algo perdido y no consigo anidar 2 capas div una seguida de otra cuando uso tamaños fijos en PX y no en Porcertanjes.

Mi codigo CSS:
<style type="text/css">



body
{
   background:url("_bgbody.png") no-repeat scroll center top #E5E5E5;
   text-align:center;

   font-family:trebuchet ms,arial,helvetica,sans-serif;
   margin:0;
   padding:0 0 15px;   
}



#Container

{

   width: 1000px;

   margin: 0px auto;

   text-align:left;
   background:url("bg-container.png") #FFFFFF;

   border: black 0px dashed;

}



#Content
{

   width: 900px;
   margin-top:  0px;
   margin-left:  auto;
   margin-right: auto;
   border: orange 0px solid;

}

#divframe   

{

   margin-left: 0px;

   width:  580px;

   height: 100%;

}



#iframe   

{

   width:  100%;

   height: 100%;

   border: none;

}

#menu

{
   margin-left: 580px;

   width: 320px;

   border: black 3px solid;

}

#menu ul    

{

   width:  100%;

   margin:  0px;

   padding: 0px;

   list-style-type: none;   

   font-family: Arial , sans-serif;

   font-size: 11pt;

}



#menu ul li {background-color: #666;}



#menu ul li a    

{

   color: #ccc;

   text-decoration: none;

   text-transform: uppercase;

   display: block;

   padding: 10px 10px 10px 20px;

}



#menu ul li a:hover

{

   background: #ff0;

   border-left:  15px solid #0f0;

   border-right: 15px solid #0f0;

   color:  #00f;

   font-weight: bolder;

}


#pie       

{

   clear: both;

   border: red 1px solid;

}

</style>



Mi codigo HTML (El body):
<body>
   <div id="encabezado"> <h1>La Prensa (Menu Derecha)</h1> </div>


   <div id="Container">
      <div id="Content">
         <div id="divframe"> <iframe id="iframe" name="iframe" src="http://www.google.es"></iframe> </div>

         <div id="menu">

            <ul>

               <li><a href ="http://www.diarioinformacion.com" title ="Diario Información" target="iframe">Diario Información </a></li>

               <li><a href ="http://www.levante-emv.com" title ="Diario Levante" target="iframe">Diario Levante</a></li>

               <li><a href ="http://www.elpais.com" title ="Diario El País" target="iframe">El País</a></li>

            </ul>

         </div>
      </div>
   </div>
      

   <div id="pie"> <p>Pie de página.</p> </div>

   

</body>



Esta en plan cutre y a medio hacer ^^u Actualmente queda asi: http://img816.imageshack.us/img816/5976 ... lazobc.png

Y claro el div del menu empieza "en la siguiente linea" y no acontinuacion. ¿En que la he pifiado?

Gracias.
float: left;

Ponle eso a #divframe. Las capas (<div>) son elementos de tipo bloque que incluyen un salto de linea delante y otro detrás. En algunos navegadores tendrás que incluir debajo de ellos un elemento con clear: both; para que funcione si mal no recuerdo.

PD: cambia esto:

margin-top: 0px;
margin-left: auto;
margin-right: auto;
border: orange 0px solid;


Por:

margin: 0 auto;
border: none;
1 respuesta