Criei uma div, que chamei de bloco01
Dentro desta div, preciso de 3 blocos de conteúdo, e 2 barras de separação, fiz o seguinte:
<div id="bloco01"> <div class="bloco01a">bloco 01a</div> <div class="barra01"><img src="imagens/barraVertical.gif" alt="" /></div> <div class="bloco01b">bloco 01b</div> <div class="barra02"><img src="imagens/barraVertical.gif" alt="" /></div> <div class="bloco01c">bloco 01c</div> </div>
E no CSS fiz assim:
#bloco01 { width:765px; height: 146px; text-align: left; position:relative; background: #fff url("../imagens/backBloco01.gif"); } #bloco01 .bloco01a { width: 230px; height: 110px; margin-top:12px; float:left; position:relative; margin-left: 10px; background: #5FA207;} #bloco01 .barra01 { margin-top:6px; float:left; position:relative; margin-left: 12px;} #bloco01 .bloco01b { width: 230px; height: 110px; margin-top:12px; float:left; position:relative; margin-left: 10px; background: #FCFF2A;} #bloco01 .barra02 { margin-top:6px; float:right; position:relative; margin-right: 254px;} #bloco01 .bloco01c { width: 230px; height: 110px; margin-top:12px; background: #747EFF;}
Só que o resultado ficou assim:
E não consigo colocar o bloco01c ao lado do 01b... na sequencia.