3 Column Layout

by Emmanuel Garcia

HTML

<div id="wrapper">
    <div id="header1"><p>LOGO</p></div>
    <div id="header2"><p>EMPRESA</p></div>
    <div id="header3"><h2>FACTURA</h2><p>FOLIO</p><p>FECHA</p></div>
</div>
<br>


<div id="wrapper2">
    <div id="receptor1"><p>CLIENTE RFC</p></div>
    <div id="receptor2"><p>DATOS DE FACTURA</p></div>
</div>
<br>

CSS

P{margin:5px;}

#wrapper { overflow:hidden; }
#header1 { width: 20%; float:left; background-color: grey; }
#header2 { width: 50%; float:left; background-color: green; }
#header3 { width: 30%; float:left; background-color: yellow; text-align:center;   }
#header3 H1{ display: inline-block; vertical-align: top;  }

#wrapper2 { border: 2px solid grey;overflow:hidden; }
#receptor1 { width: 50%; float:left; background-color: grey; }
#receptor2 { width: 50%; float:left; background-color: green; }
#receptor3 H1{ display: inline-block; vertical-align: top;  }