Tabela CSS quebrando linha

[brunnafsws 0]

O que eu faço pra essa tabela não se quebrar quando diminuir e aumentar o zoom do navegador? Já tentei com nowrap e não consegui... Não sei se eu fiz tudo errado, pois não tenho muito conhecimento em HTML/CSS... Mas me ajudeeem, please!

<style>
/* TAB CATEGORIAS
----------------------------------------------- */
 
.caixa {display:table-cell;width:1240px;height:auto}
 
.imagem a{width:237px;height:258px;     -webkit-transition: 0.3s ease-out;
        -moz-transition: 0.3s ease-out;
        -o-transition: 0.3s ease-out;
        transition: 0.3s ease-out;}
 
.linha {border:1px solid #D8D8D8;margin-left: 10px;float: left;}
 
.linhaquatro {border:1px solid #D8D8D8;margin-right: 0px;float: left;}
 
.rotulo {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;text-transform:uppercase;padding:13px;color: #654D6C;font-size:16px;}
 
.rotulo a:link, a:visited, a:active {text-decoration:none;color:#654D6C;}
 
.imagem a:hover{
filter: alpha(opacity:0.5);
KHTMLOpacity: 0.5;
MozOpacity: 0.5;
-khtml-opacity:.50;
-ms-filter:"alpha(opacity=50)";
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;    -webkit-transition: 0.2s ease-out;
        -moz-transition: 0.2s ease-out;
        -o-transition: 0.2s ease-out;
        transition: 0.2s ease-out;}
</style>
 
<div class="caixa">
 
    <div class="linhaquatro">
    <div class="imagem"><a href="#"><img src="http://i.imgur.com/sED5XZq.jpg" /></a></div>
    <div class="rotulo"><a href="#">TITLE 1</a></div>
    </div>
   
    <div class="linha">
    <div class="imagem"><a href="#"><img src="http://i.imgur.com/sED5XZq.jpg" /></a></div>
    <div class="rotulo"><a href="#">TITLE 2</a></div></div>
   
    <div class="linha">
    <div class="imagem"><a href="#"><img src="http://i.imgur.com/sED5XZq.jpg" /></a></div>
    <div class="rotulo"><a href="#">TITLE 3</a></div></div>
 
    <div class="linha">
    <div class="imagem"><a href="#"><img src="http://i.imgur.com/sED5XZq.jpg" /></a></div>
    <div class="rotulo"><a href="#">TITLE 4</a></div></div>
   
    <div class="linha">
    <div class="imagem"><a href="#"><img src="http://i.imgur.com/sED5XZq.jpg" /></a></div>
    <div class="rotulo"><a href="#">TITLE 5</a></div></div>
   
</div>
 
</style>

[lokaodomau 61]

O que acontece se tirar o FLOAT das classes .linha e .linhaquarto?

[brunnafsws 0]

O que acontece se tirar o FLOAT das classes .linha e .linhaquarto?

Fica um embaixo do outro zzzzzzz

[Electronic 124]

Tire o width em .caixa

[brunnafsws 0]

Tire o width em .caixa

Já fiz isso e o problema continua no LAYOUT. Tem que ter um limite, né?

[lokaodomau 61]

Muda o [inline]display:table-cell;[/inline] de [inline].caixa[/inline].

 

Existe o [inline]display:inline-table;[/inline] mas não sei pra que serve, geralmente eu uso o block, none, inline-block, hehehe. Só sei que funcionou quando eu coloquei o block, coloquei borda na classe .caixa pra ver como esse table-cell funcionava, e acho que o inline-table ou inline-block tem efeito parecido com o que deseja (no meu entendimento).