Eu procurei pelo fórum, acheis uns tópicos relacionados, mas ou por newbice minha ou porque o caso é diferente, eu não consegui resolver.
Imagem 1
Imagem 2
Segue o meu HTML e meu CSS. (Eu to usando esse pedaço do layout como tabela pois ainda não me sinti confortável para fazer essa parte em tableless direto, mas tudo que for centro do conteúdo ali vai ser em CSS)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="autor" content="Fabio Pittol" /> <meta name="palavras-chave" content="electric, brain, rfactor, simulador, mods, games, jogos" /><title>ELECTRIC BRAIN Studios</title> <style type="text/css" media="all"> @import "ebrain.css"; </style></head><body><!-- pagina inteira --><div id="container"><!-- estrutura --><div id="shadow_l"></div><div id="bar_l"></div><div id="content"></div><div id="bar_r"></div><div id="shadow_r"></div><!-- estrutura (fim) --></div><!-- pagina inteira (fim) --></body></html>
@charset "utf-8";/* CSS Document *//* Elementos Básicos */html { margin: 0; padding: 0; } body { font: Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #555753; background: #d3d3d3 url(images/background.jpg); margin: 0; padding: 0; text-align: center; } a:link { font-weight: bold; text-decoration: none; color: #B7A5DF; } a:visited { font-weight: bold; text-decoration: none; color: #D4CDDC; } a:hover, a:active { text-decoration: underline; color: #9685BA; } acronym { border-bottom: none; } /* Características da Página */#container { width: 882px; text-align: left; margin: auto; } #shadow_l { background: url(images/shadow_left.png) repeat-y top right; width: 29px; height: 100px; float: left; } #shadow_r { background: url(images/shadow_right.png) repeat-y top left; width: 29px; height: 100px; float: left; } #bar_l { background: url(images/bar_left.jpg) repeat-y top right; width: 14px; height: 100px; float: left; } #bar_r { background: url(images/bar_right.jpg) repeat-y top left; width: 14px; height: 100px; float: left; } #content { background: #f4f4f4; width: 796px; height: 100px; color: #f4f4f4; float: left; }