Listagem horizontal onde os itens de lista vão ficar sempre com tamanho igual (se baseando na altura do maior dos itens): utilizando somente HTML e CSS.

Seria uma listagem no modelo da Americanas.com e Submarino – Porém quando verifiquei o código desses sites vi que não era o ideal, pois utilizam um monte de ULs separadas para cada linha: sendo que deveria ser somente 1.

Pontos positivos – Lista com Display Inline-block

• Todos itens da linha se adaptam ao tamanho do maior;
• Sem float: sem preoupações com clear, contemfloat, etc;
• Possível listar tudo utilizando somente uma UL;

Pontos negativos – Suporte

• Hack para IE6;
• Hack/script para IE7;

Veja o exemplo de como vai ficar: Listagem horizontal com itens de mesma altura.

Código HTML

Somente uma listagem UL com items LI contendo uma imagem e um parágrafo.

  <!-- abre listagem -->
    <ul>
      <li>
        <img src="imagens/listagem-item1.jpg" alt="Quadro em aquarela 1" />
        <p>Quadro em Aquarela 60x60px. Pode ser comprado em até <strong>6x no cartão</strong> ou à vista com desconto de <strong>50%</strong> - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item2.jpg" alt="Quadro em aquarela 2" />
        <p>Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item3.jpg" alt="Quadro em aquarela 3" />
        <p>Obra em Aquarela</p>
      </li>
    </ul>
    <!-- fecha listagem -->

E o CSS:

  #limites ul { list-style: none; letter-spacing: -3px;}
  #limites ul li { display: inline-block; width: 100px; margin: 10px 0; padding: 20px; border-top: 1px #fff solid; text-align: center; vertical-align: top; letter-spacing: normal; zoom: 1; }
  #limites ul li p { text-align: left; }

• Letter-spacing com valor negativo na UL, pois o display insere automaticamente alguns pixels de margem entre os elementos. Esse valor é zerado novamente no LI (normal).
• Todos itens se alinham ao topo
• Paddings com a borda simulam a união dos elementos

Se for testar nos IEs até agora, vai encontrar um BUG como esse:

Quebra de layout nos IEs

O quadro vermelho indica a quebra, pois esses navegadores não suportam o DISPLAY inline-block corretamente.

Não se preocupe – para concertar isso é só usar um hack para o IE6:

  * html #limites ul li { display: inline; }

E um ajuste para o IE7 – em um CSS separado (se não lembra como fazer, é bom dar uma lida em Conditional comments para Internet Explorer:

  #limites ul li { display: inline; }

Pronto.
Temos uma lista semanticamente correta onde cada linha se adapta ao conteúdo do maior elemento.