<html>
<head>
<title>Teste com Tableless/HTML</title>
</head>
<style type="text/css">
body {
margin: 0;
background-color: #EFEFEF;
}
#divmain {
width: 700px;
height: 100%;
background-color: #FFF;
margin: 0 auto;
display: table;
}
#divtop {
clear: right;
}
#divleft {
width: 17%;
float: left;
}
#divright {
width: 17%;
float: right;
}
#divmiddle {
width: 53%;
float: left;
}
#divbottom {
clear: both;
}
#divtop, #divmiddle, #divbottom, #divleft, #divright { padding: 2px; border: 1px solid #F00; margin: 2px; background-color: #CCC;}
</style>
<body>
<div id="divmain">
<div id="divtop">TOPO</div>
<div id="divleft">ESQUERDA</div>
<div id="divmiddle">MEIO</div>
<div id="divright">DIREITA</div>
<div id="divbottom">RODAPÉ</div>
</div>
</body>
</html>
Que fica como abaixo:
post.GIF 8.69KB
15 downloadsGostaria de saber por que há um espaçamento maior entre o TOPO e as DIVS: ESQUERDA, DIREITA e MEIO.
Se repararem bem o espaço entre a DIV (divtop) é maior do que entre a #divbottom e as três de cima!
Obrigado desde já!
Abraços!
Eu sei que a pergunta pode ser ridícula para alguns, mas procurei entender a lógica do código atual e não consegui ainda resolver esse problema do espaçamento!
Agradeço a compreensão
