Alinhando duas colunas

[marcelo2605 10]

Tenho a seguinte estrutura:

 

<div class="coluna">
<p class="bold">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat.</p>
</div>

<div class="coluna">
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human.</p>
</div>

 

E o seguinte CSS:

 

.coluna{
width:400px;
float:left;
margin-right:50px;
}

p{
font-family: Arial, sans-serif;
font-size:15px;
line-height:18px;
text-align:left;
margin-bottom:18px;
}

.bold{
font-size:17px;
line-height:18px;
font-weight:bold;
}

 

Como vocês podem ver, o primeiro parágrafo é um pouco maior do que o resto e está em negrito. Mas mantém a mesma altura de linha do resto do texto. Mas ele acaba desalinhando as duas colunas. Alguém sabe se há uma forma de resolver isso?

[Giovani 104]

Desanlinhando como? Você está falando na altura ou as colunas estão quebrando - ficando uma embaixo da outra?

 

Outros comentários marcelo2605:

- em alguns casos, depende do conteúdo, é melhor usar listas em vez de classes;

- class bold? Por que não coloca um strong? Se é um título fica bem melhor um h'n :thumbsup:

[Dian Carlos 29]

não entendi muito bem o que você quis dizer, mas, se você quer que as duas divs fiquem alinhadas tipo um 'X' diminua o tamanho da fonte na classe .bold para 15px. isso deve resolver.

 

Boa sorte ^^

[marcelo2605 10]

Pessoal, são duas colunas, uma ao lado da outra. Todos os parágrafos têm o mesmo line-height (19px). O primeiro parágrafo é bold e tem font-size 17px (o resto é 15px).

 

Se eu fosse editorar isso em um programa como o inDesign, as linhas das colunas ficariam alinhadas, pois tem o mesmo line-height, mesmo que não tenham o mesmo font-size. Mas no html isso não acontece.

 

Descobri que se se eu colocar o mesmo font-size para todos e só manter o bold, elas se alinham. Mas não deveria ser assim.

[William Bruno 1501]

web é web e impresso é impresso.

 

é irrelevante você igualar as alturas das colunas pela quantidade de letras estando em um ambiente web :lol:

com html e css não existe uma forma de fazer isso 'automaticamente', assim como o teu programa de impressos faz.