[Resolvido] Layout de 3 colunas com várias box
Estou precisando mantar um layoute de tres colunas com o código abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portal</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="all">
<div id="top">
<img src="img/topo.png" alt="Banner Topo" />
</div>
<div id="bar">
</div>
<div id="menu">
</div>
<div id="merchant1">
</div>
<div id="container">
</div>
<div id="merchant2">
</div>
<div id="merchant3">
</div>
<div id="merchant4">
</div>
<div id="floor">
<img src="img/rodape.png" alt="Rodapé" />
</div>
</div>
</body>
</html>O CSS:
@charset "utf-8";
/ CSS Document /
html {
margin: 0;
padding: 0;
}body{
background-color: #19507D;
text-align:center;
}
#all{
border: 1px solid #FFFFFF;
}
#top{
border: 1px solid #FFFFFF;
width: auto;
}
#bar{
border: 1px solid #FFFFFF;
width: 100%;
height: 40px;
}
#menu{
border: 1px solid #FFFFFF;
width: 25%;
height: 350px;
float: left;
}
#merchant1{
border: 1px solid #FFFFFF;
width: 25%;
height: 150px;
clear: both;
}
#container{
border: 1px solid #FFFFFF;
width: 50%;
height: 500px;
float: left;
}
#merchant2{
border: 1px solid #FFFFFF;
width: 25%;
height: 166px;
float: right;
}
#merchant3{
border: 1px solid #FFFFFF;
width: 25%;
height: 166px;
clear: both;
float: right;
}
#merchant4{
border: 1px solid #FFFFFF;
width: 25%;
height: 166px;
clear: both;
float: right;
}
#floor{
border: 1px solid #FFFFFF;
}Por algum motivo o box "container" não está indo para o centro da página.
Alguém pode me ajudar?
Discussão (3)
Carregando comentários...