Foros del Web - Ver Mensaje Individual

andresdzphp · #2 (**permalink**) 28/07/2011, 23:28

Te dejo un ejemplo rápido basado en tu imagen, para que entiendas más o menos como hacerlo.

Código HTML:

Ver original<!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=utf-8" />
<title>Ejemplo</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">Cabecera</div>     
<div id="slider">Slider</div>  
<div id="sidebar1">Sidebar 1</div> 
<div id="contenido">      
<p>Caja 1</p> <p>Caja 2</p> <p>Caja 3</p>     
<p>Caja 4</p> <p>Caja 5</p> <p>Caja 6</p>       
<p>Caja 7</p> <p>Caja 8</p> <p>Caja 9</p>
<p>Caja 10</p> <p>Caja 11</p> <p>Caja 12</p>      
</div>
<div id="sidebar2">SideBar 2</div>
</div>
</body>
</html>

estilos.css

Código CSS:

Ver originalbody {
    margin: 0;
    font-family: Tahoma, Geneva, sans-serif;
    background: #FFF;
    color: #000;
}
 
#contenedor {
    width: 960px;
    margin: 0 auto;
    background: #cccc00;
    height: 1000px;
}
 
#cabecera {
    height: 120px;
    background: #99ccff;
}
 
#slider {
    height: 200px;
    background: #ff9900;
}
 
#sidebar1, #sidebar2 {
    float: left;
    height: 680px;
    background: #cccccc;
    width: 200px;
}
 
#contenido {
    width: 560px;
    float: left;
}
 
#contenido p {
    margin: 40px 0 0 50px;
    width: 120px;
    height: 120px;
    float: left;
    background: #fff;
    text-align: center;
}