← HTML + CSS

Estruturar div's

Lida 2163 vezes

Offline
j

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
l

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
C

CasaTuga 
Membro
Mensagens 397 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Avatar Tenth year Anniversary Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

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
t

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 ;)

Páginas: 1

Posts relacionados

HTML + CSS

[HTML] Como estruturar

T
Thomato

Conversa Geral

MOVIDO: Como estruturar

asturmas

Desenvolvimento

MOVIDO: [HTML] Como estruturar

Warrior