Como hago esto en css?

1RdXD · #1 (**permalink**) 02/06/2013, 15:41

Hola amigo como estan?... bueno les cuento, no se mucho de css pues estoy empezando pero quiero hacer una pagina (que ya hice en html con tablas) y la estructura que quiero no la encotre en ningun lado y no pude hacerla.. en fin:

no se como hacer que esta estructura de 3 columnas

sea asi:

osea que la columna de la derecha abarque todo excepto el pie de pagina...

Su codigo HTML es este:

Código:

<body>

   <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
         
               This is the Header         
               
         </div>
         <!-- End Header -->
         
         <!-- Begin Left Column -->
         <div id="leftcolumn">
         
               Left Column
         
         </div>
         <!-- End Left Column -->
         
         <!-- Begin Content Column -->
         <div id="content">
               
              <a href="#">Download this CSS Layout</a>         
         
         </div>
         <!-- End Content Column -->
         
         <!-- Begin Right Column -->
         <div id="rightcolumn">
         
               Right Column
         
         </div>
         <!-- End Right Column -->
         
         <!-- Begin Footer -->
         <div id="footer">
               
               This is the Footer        
                
         </div>
         <!-- End Footer -->
         
   </div>
   <!-- End Wrapper -->
   
</body>

y el CSS es el siguiente:

Código:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #BD9C8C;
}
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#content { 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 456px;
 display: inline;
}
#rightcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#footer { 
 width: 900px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

pzin · #2 (**permalink**) 02/06/2013, 16:19

Es simplemente una estructura principal de dos columnas y un pie de página, y en la primera de esas dos columnas creas la cabecera y la columa izquierda y central.

Algo así:

La cosa es hacer la columna roja y la naranja.