En el código siguiente se expone cómo crear dos columnas de diferente anchura utilizando la etiqueta div. En la columna de la derecha se ubican 3 divs adicionales para ubicar información. En cada uno de estos div podríamos incrustar el código que deseemos, iframes o cualquier otra cosa.
<!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>2 columnas con CSS</title>
<style type="text/css">
<!--
#inicio_ausencias {
float:right;
height:100px;
width:60%;
background-color:#99FF99;
}
#inicio_expulsados {
float:right;
height:100px;
width:60%;
background-color:#99FF99;
}
#inicio_email {
float:right;
height:100px;
width:60%;
background-color:#99FF99;
}
#profesoradoguardia {
float:left;
height:300px;
width:40%;
background-color:#99FFFF;
}
-->
</style>
</head>
<body>
<div id="contenedor3">
<div id="profesoradoguardia">Profesorado de guardia
</div>
<div id="inicio_ausencias">Profesorado ausente hoy...
</div>
<div id="inicio_expulsados">Alumnado y periodos de expulsión...
</div>
<div id="inicio_email">Buzón entrada email guardias...
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario