そのため、複数の div が画面上に再配置されたページがあります。問題は、div を追加するとページが高くなることです。
オブス。これがフッターです。*ページの残りの部分に追加するために、php の include タグで言及しました。
（私の英語について申し訳ありません）
HTML:
<div id="rodape_content">
<div id="conteudo"><br/>
<center>
<img src="img/sonhe_as_solucao.png" width="300" height="66"/>
</center>
<br/>
<div id="modelo01">
<p><img src="img/modelos/comercio.png" width="50" height="50" align="left"/>
<font color="#fff">COMÉRCIO ELETRÔNICO
<p align="justify">Sites de comércio eletrônico (e-commerce/ loja virtual) é um grande diferencial
competitivo para qualquer empresa, independente do porte da mesma. Com a After Solutions, você
poderá vender suas mercadorias on-line com facilidade e profissionalismo, dispondo das mais
modernas ferramentas do mercado.</p>
</font>
</div>
<div id="modelo02">
<p><img src="img/modelos/dinamicos.png" width="50" height="50" align="left"/>
<font color="#fff">SITE DINÂMICO (PHP)
<p align="justify">Sites dinâmicos, em PHP, são sites "programados" para uma finalidade específica,
seja gerenciar uma área do cliente ou então ter uma interface de manutenção do seu próprio
website. Exemplos de plataformas em PHP: Wordpress (gerenciamento de website), WHMCS
(gerenciamento de clientes e produtos) e PHPbb (gerenciamento de forum).</p>
</font>
</div>
<div id="modelo03">
<p><img src="img/modelos/blogs.png" width="50" height="50" align="left"/>
<font color="#fff">BLOGS
<p align="justify">Os blogs, atualmente, destacam-se pela facilidade de adicionar e expor conteúdos.
Exemplos? Blogs de Humor integrados com as redes sociais, blogs de notícias, pessoais entre
outros. Na After Solutions, você tem a comodidade de ter um blog "desenhado" em sintonia com o
conteúdo postado.</p>
</font>
</div>
<div id="modelo04">
<p><img src="img/modelos/blogs.png" width="50" height="50" align="left"/>
<font color="#fff">PORTFÓLIO
<p align="justify">Um portfólio, é a melhor maneira para um artista expor seu trabalho. A After
Solutions desenvolve portfólios para todo o tipo de artista, seja para músicos, pintores,
fotográfos... Além disso, é possível integrar seu portfólio com um blog, com uma loja virtual ou
ambos! Exponha, anuncie, venda sua obra! </p>
</font>
</div>
</div>
CSS:
body, td, th {
color: #999;
background-image: url(../img/fundo.png);
background-repeat: repeat;
margin: auto;
font-family: "Arial Narrow", cursive;
}
#conteudo {
width: 920px;
margin: auto
}
#modelo01 {
width:220px;
height:250px;
position:relative;
background-image:url(../img/sub_cabecalho_bg.png);
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 5px; /* regular */
border: 2px solid #CCC;
clear:both;
}
#modelo02 {
width:220px;
height:250px;
position:relative;
top: -254px;
left:230px;
background-image:url(../img/sub_cabecalho_bg.png);
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 5px; /* regular */
border: 2px solid #CCC;
clear:both;
}
#modelo03 {
width:220px;
height:250px;
position:relative;
top: -508px;
left:460px;
background-image:url(../img/sub_cabecalho_bg.png);
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 5px; /* regular */
border: 2px solid #CCC;
clear:both;
}
#modelo04 {
width:220px;
height:250px;
position:relative;
top: -762px;
left:690px;
background-image:url(../img/sub_cabecalho_bg.png);
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 5px; /* regular */
border: 2px solid #CCC;
clear:both;
}
#rodape_content {
width: 100%;
height: auto;
background-color: #099;
margin-top: 0px;
border-top: 5px solid #ccc;
}
写真：
