maquetar con 3 y 2 columnas

<html>
<head>
<!-- < < , > > -->
<style type="text/css">
body {
margin:0; padding:0;
font-size:80%;
font-family: sans-serif;
}
#wrap{
width:800px;
margin: auto;
text-align:left;
}

#contenedor {
display: table;
width: 100%;
margin: auto;
padding:0;
border: 1px solid black;
background: green;
}

#row {
display: table-row;
width: 100%;

}

#izquierda_3 {
width:50%;
background: green;
_float: left;
display: table-cell;
}

#central_3{
width:25%;
background:yellow;
_float: left;
display: table-cell;
}

#derecha_3{
width:25%;
background:#FEE;
_float: left;
display: table-cell;
}

#izquierda_2 {
width:50%;
background: green;
_float: left;
display: table-cell;
}

#central_2{
width:50%;
background:red;
_float: left;
display: table-cell;
}
#campo{
margin: 10;
padding:10;
}

body{
background-color: black;
}

label {
display:block;
font-weight:bold;
color: red;
}

.inputLargo{
width: 400
}

.inputCorto{
width: 100
}


</style>
</head>
<body>
<div id="wrap">
<div id="header"><p>Título de tu página.</p></div>
</div>
<div id="contenedor">

<div id="row">
<div id="izquierda_3">
<h4>Col. Izq.</h4>
<p>1/1</p>
<div id="campo">
<label>campo</label>
<input type="test" class="inputCorto" value="valorCorto" />
</div>
<div id="campo">
<label>campo</label>
<input type="test" class="inputLargo" value="valorLargo" />
</div>
</div>
<div id="central_3">
<h4>Col. Central</h4>
<p>1/2</p>
</div>
<div id="derecha_3">
<h4>Col. Dcha.</h4>
<p>1/3</p>
</div>
</div>

<div id="row">
<div id="izquierda_2">
<h4>Col. Izq.</h4>
<p>1/2</p>
</div>
<div id="derecha_2">
<h4>Col. Dcha.</h4>
<p>2/2</p>
</div>
</div>
</div>

<div id=pie">
Aquí el contenido de tu pie de página.
</div>
</body>
</html>

Etiquetas: