[rcdesign]

apesar de parecer simples, estou tomando um baile pra conseguir fazer funcionar do jeito que eu preciso...

Layout com tabelas

estou fazendo assim:
html

CODE

<div id="round">
 <span class="rtop">
  <span class="r1"></span>
  <span class="r2"></span>
  <span class="r3"></span>
  <span class="r4"></span>
 </span>
 <div id="areas">
 <p><img src="img/icone.gif" width="12" height="14" /> <?= $r1[1] ?></p>
 <div class="linha1"><div style="width: 80%; height: 2px; font-size: 1px; "></div></div>
 <p><?= $r1[2] ?></p>
 <div class="linha2"><div style="width: 90%; height: 2px; font-size: 1px;"></div></div>
 <p><img src="img/icone.gif" width="12" height="14" /> <?= $r2[1] ?></p>
 <div class="linha1"><div style="width: 80%; height: 2px; font-size: 1px; "></div></div>
 <p><?= $r2[2] ?></p>
 <div class="linha2"><div style="width: 90%; height: 2px; font-size: 1px;"></div></div>
 <p><img src="img/icone.gif" width="12" height="14" /> <?= $r3[1] ?></p>
 <div class="linha1"><div style="width: 80%; height: 2px; font-size: 1px; "></div></div>
 <p><?= $r3[2] ?></p>
 <div class="linha2"><div style="width: 90%; height: 2px; font-size: 1px;"></div></div>
 </div>
 <span class="rbottom">
  <span class="r4"></span>
  <span class="r3"></span>
  <span class="r2"></span>
  <span class="r1"></span>
 </span>

CSS

CODE

body {
font-family:Arial, Tahoma, Verdana, sans-serif;
font-size:100%;
font-weight:400;
color: #000000;
background-image:url(img/fundo.jpg);
text-align:center;/* centraliza a caixa de texto - primeira parte */
margin:0;
padding:0;
}
div#round {
text-align:left;
margin:10px 0 0 15px;/* centraliza a caixa de texto - segunda parte */
padding:0;
}
div#round p {
font-size:100%;
font-weight:400;
background:#FFFFFF;
margin:0;
padding:10px;
_padding:3px;
_margin-bottom: 10px;
}
span.rtop, span.rbottom {
display:block;
}
span.rtop span, span.rbottom span {
display:block;
height:1px;
overflow:hidden;
background:#FFFFFF;
}
span.r1 {
margin:0 5px;
}
span.r2 {
margin:0 3px;
}
span.r3 {
margin:0 2px;
}
span.rtop span.r4, span.rbottom span.r4 {
margin:0 1px;
height:2px;
}
#areas {
font-size:100%;
background:#FFFFFF;
margin:0;
padding:10px;
}
.linha1 div {
background-color: #fadf27;
margin-left: 20px;
margin-top: -10px;
}
.linha2 div {
background-color: #000000;
margin: 0 30px 0 30px;
_margin-bottom:10px;
}

As 4 'áreas' do layout têm conteúdo dinâmico, ou seja o texto pode (e vai) ser alterado, mudando o tamanho/altura das div´s, principalmente das 3 'linhas' é claro. Quando insiro uma div adicional para incluir a 'coluna' o layout vai pro espaço....