Código CSS:
#contenedor {
width:80%;
float:left;
margin-right: 10px;
font-family: verdana;font-size:0.8em;
color:#9e5205;
text-align:justify;
}
#arriba {
border: 1px solid #9e5205;
margin-bottom: 10px;
padding: 10px;
background-color:#f5e39e;
}
#tabla {
display: table;
width: 100%;
border: 1px solid #9e5205;
border-collapse:collapse;
}
#fila {
display: table-row;
background-color:#f5e39e;
}
#celda-izq {
display: table-cell;
width: 50%;
padding: 10px;
}
#celda-der {
display: table-cell;
border-left: 1px dotted #9e5205;
width: 50%;
padding: 10px;
}Código HTML:
Ejemplo:<div id="contenedor">
<div id="arriba">Lorem ipsum dolor...</div>
<div id="tabla">
<div id="fila">
<div id="celda-izq">Etiam scelerisque lorem...</div>
<div id="celda-der">Quisque volutpat metus...</div>
</div>
</div>
</div>
<div><p>Sed id suscipit sapien...</p>
<p>In arcu enim, rutrum sed...</p>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac consectetur enim. Morbi ac imperdiet risus. In justo sem, sodales in feugiat at, suscipit vel purus. Morbi sed mauris et eros congue rutrum. Nam scelerisque ipsum a risus sagittis nec elementum diam pretium. In nec sapien lectus. Proin enim neque, vestibulum vitae euismod et, condimentum sit amet elit. Vivamus a turpis ipsum, a scelerisque nulla. Nam sed dolor commodo nibh ornare ornare in vel erat. Pellentesque eget vestibulum orci. Duis ullamcorper tincidunt neque, ultrices imperdiet mi iaculis quis. Maecenas egestas lobortis turpis ac fringilla. Mauris et ornare ligula. Ut adipiscing felis id nibh eleifend sodales. Praesent lacinia urna sed nunc gravida dignissim. Proin malesuada commodo urna nec dapibus.
Etiam scelerisque lorem at nibh interdum bibendum. Donec convallis lacinia tortor vel fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque fringilla felis vitae tincidunt. Phasellus nec cursus diam. Proin tristique libero id mauris ullamcorper tincidunt vel non orci. Maecenas interdum lorem gravida nisl sagittis id porttitor tellus bibendum. Mauris vitae quam a felis euismod sollicitudin. Fusce scelerisque, metus quis imperdiet condimentum, dui ligula pellentesque velit, a accumsan dolor lectus eu augue. Pellentesque malesuada mauris a mauris blandit rutrum. Pellentesque faucibus tortor a ligula molestie sit amet iaculis libero commodo.
Quisque volutpat metus nec eros imperdiet non molestie nibh blandit. Quisque luctus, orci sed malesuada fermentum, urna sem convallis mauris, et mattis odio arcu eu neque. Integer ultrices ultricies cursus. Pellentesque eu ultricies mi. Suspendisse potenti. Cras nisl mi, mattis ac iaculis et, placerat ut quam. Integer pulvinar congue felis, at egestas mi bibendum quis. Mauris vel lectus eleifend libero pulvinar gravida id in purus. Mauris aliquam tristique porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce laoreet tellus at purus dictum nec varius ligula dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam lobortis nunc non nisl vulputate dignissim id non justo.
Sed id suscipit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna nunc, dictum vel hendrerit consequat, consequat non ipsum. Nunc eu nunc at odio placerat sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean sed gravida lorem. Nulla vel rhoncus nisl. Cras ultricies nibh velit. Proin tempor augue lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat metus eget erat aliquet porttitor. In ullamcorper dignissim risus, sit amet dictum sapien fermentum nec. Mauris tempor dolor et nisl facilisis non porttitor quam vulputate. Proin faucibus, augue at dictum ultrices, tellus tortor laoreet tellus, non vestibulum ligula neque a est. Pellentesque ultrices elit ac est porttitor vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean non odio et ligula facilisis ornare.
In arcu enim, rutrum sed viverra vel, fermentum quis justo. Donec nisi ligula, pulvinar et pharetra eget, pulvinar eget lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nunc tortor, posuere sed consectetur id, fringilla non elit. Nulla sit amet neque justo, eu dapibus magna. Etiam eget vehicula mi. Nunc metus mi, sollicitudin sit amet convallis non, facilisis et ipsum. Sed non sapien non lorem ornare rhoncus ac sit amet nisl. Duis ut nunc leo. Nam imperdiet ante augue, fringilla porta mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis odio odio, porta elementum velit. Praesent sit amet nisl nisl, at aliquam nunc. Quisque orci ligula, elementum in consectetur sed, imperdiet sit amet quam. Etiam fermentum elit quis lectus mollis id porta odio auctor. Integer sapien mauris, faucibus id vestibulum convallis, tristique vel nulla. In hac habitasse platea dictumst.
