Div não expansão proporcional ao conteúdo

Question

Eu estou convertendo um monte de tabelas em divs, o próprio layout é muito simples e até agora ele funciona muito bem no IE e FFX. Mas, quando o conteúdo de uma div não se encaixa, então ele cresce fora dela, e empurra tudo depois para baixo ... em outras obras, faz uma bagunça O layout é como este,

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
 </div>

Right flutua direito, título vai em cima dentro de certo e conteúdo é sob ela, carros alegóricos esquerda e spans a altura da direita (originalmente que era um rowspan = 2). o problema vem com invólucro que precisa ter uma altura fixa, porque seu pai não tem qualquer (por isso não posso usar%), e uma vez que o conteúdo é dinâmico Eu não sei de antemão que altura eu preciso. Se eu me livrar de altura, se expande div, mas o estilo do div (cor bg, fronteira etc) desaparece porque agora tem altura 0.

Além disso, eu estou trabalhando em um código pré-existente que, idealmente, eu não quero sobrecarregar demais com hacks JavaScript, mas se eu não tenho escolha, então eu vou. Então, o que eu posso fazer?

div.wrapper{ height: 150px ; width: 100% ; } 

div.left{ height: 100% ; float: left ; width: 25% ; text-align: center ; } 

div.right{ float: right ; height: 100% ; } 

div.title{ width: 100% ; height: 50px ; } 

div.content{ width: 100% ; height: 100px ; text-align: center ; }

Answer 1

Em primeiro lugar, não use <div class="title">, uso <h1>.

Dito isto eu diria que você poderia tentar brincar com a propriedade de altura ... mas sem CSS é difícil dizer o que está acontecendo.

Outro truque é colocar um fundo na embalagem para fingir que a div esquerda está se expandindo por todo o caminho até o fundo. Esquerda e Direita flutuador esquerda e direita com largura fixa e ele parece estar bom.

EDIT:

Ok, após seing o CSS, eu diria que o que você quer fazer é adicionar um clear: both no final da embalagem como tal:

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
    <div style="clear both;"></div>
 </div>

Em seguida, o "hack" que iria trabalhar para isso é definir o plano de fundo que normalmente seria na esquerda na embalagem. Assim ele vai olhar que deixou é denominado quando na verdade ele é o invólucro que contém o estilo.

A propósito, não vá div.class, basta usar .class

Answer 2

Eu estou supondo que você precisa para conter carros alegóricos com

div.wrapper { overflow:hidden; }

Mas seria bom se você realmente colado alguns css.

Editar: Para replicar 100% de altura com as colunas de uma maneira fácil como mencionado antes é a contar com colunas falso, definir uma imagem de fundo no div.wrapper (fundo: URL (repeat.gif) repetir-y;) e a matar altura de 100% nas colunas porque isso não terá qualquer efeito.