← HTML + CSS

Estruturar div's

Lida 1625 vezes

Offline

jtk 
Membro
Mensagens 141 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Alguém sabe uma maneira boa para  ter 3 divs lado a lado (não têm altura máxima definida) e por baixo dos 3 divs, ter um div a ocupar a largura toda.

Tipo um tema wordpress com 3 colunas e footer
Offline

leite 
Membro
Mensagens 864 Gostos 11
Troféus totais: 29
Trófeus: (Ver todos)
Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Experimenta usar o float: left;

Define a largura para as três div's e deve funcionar ...

para estruturares da forma que queres podes colocar uma div principal onde irá encaixar as três div's lá dentro e depois a outra div do footer a seguir à div principal
Offline

CasaTuga 
Membro
Mensagens 397 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Float left no primeiro, Display:inline; nos outros dois


Embora isto com 3, por vezes,  dê complicações (digo eu que não percebo assim tanto)
Offline

yoda.pt 
Membro
Mensagens 49 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Defines a largura repartida pelas 3 divs de cima, e metes float: left;

Para a ultima de baixo ficar sempre abaixo dessas 3, metes-lhe um clear:both;
Offline

tonebiclas 
Membro
Mensagens 29 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Level 3 Level 2 Level 1 10 Posts First Post Karma Eighth year Anniversary Seventh year Anniversary

a minha sugestão:

formatação:

Código: [Seleccione]
.colLeft, .colCenter, .colRight {
width:200px;
float:left;
}
.clearing{
clear:both;
}

marcação:

Código: [Seleccione]
<div class="colLeft"></div>
<div class="colCenter"></div>
<div class="colRight"></div>
<div class="clearing"></div>
<div class="footer"></div>


cumps ;)