carros alegóricos CSS com larguras desconhecidos não envolvê espaços em branco com doctype

Question

Duas divs, flutuou à esquerda, de largura desconhecida. Um deles tem mais conteúdo do que se encaixa na página, por isso ele se move abaixo da primeira (exceto no IE):

http://corexii.com/floatproblem/float.html

Adicionar display: inline-table; e um dos grandes envolve seu conteúdo (de forma consistente em todos os navegadores):

http://corexii.com/floatproblem/table.html

Mas introduzir um doctype (e não apenas restrito, QUALQUER doctype) e isso não acontece mais no Firefox:

http://corexii.com/floatproblem/doctype.html

Como posso obter a div direita para embrulhar seu conteúdo ao usar um doctype, ao mesmo tempo, de forma confiável em todos os navegadores?

Answer 1

Como posso obter a div direita para embrulhar a sua conteúdo ao usar um doctype no mesmo tempo, de forma confiável em todos os navegadores?

Sem definir larguras, não pode . Eu recomendo larguras percentuais neste caso, mas é até você.

A largura padrão para um div é de 100% do seu recipiente (no caso da página). A primeira div vai acabar o seu tamanho real, a menos que você dimensionar a página para ser menor que sua largura inerente. Esperando consistência accross navegadores sem um doctype completo e válido é simplesmente um exercício de futilidade.

Answer 2

CSS não consegue fazer tudo o que layouts baseados pode. Por um lado, layouts largura dinâmica são complicadas muito mais. layouts de mesa-menos ainda são preferíveis para 98% dos casos, mas se você realmente precisa deste tipo de dinâmica largura layout que você pode ter que usar uma tabela.

larguras inconsistente, se não for cuidadosamente proporcionado, não são muito boas do ponto de vista estético, assim você pode estar corrigindo o problema errado.

Answer 3

Você pode começar pela inclusão de um elemento BODY.

Traingamer lhe deu uma explicação do comportamento do Firefox eo que precisa ser feito para obter o resultado desejado. Você pode ouvi-lo em vez de ir fora em uma tangente sobre CSS sendo impossível criar layouts com.

Não culpe CSS para os problemas que você estão introduzindo pelo não cumprimento com as especificações da web corretas.