そのため、div がスタックされていることについて読んだことがあり、多くの投稿で clear: left; の使用が提案されています。しかし、それを行うと、「左にクリア」されるため、機能しません。
div と現在の css スタイルを配置すると、マップ div の隣に合法的な div が残り、これら 2 つのセットのみがスタックするのではなく、著作権/デザイン div と同じです。
HTML コード
<div id="footer">
<div id="footerLeft"></div>
<div id="footerMap"></div>
<div id="footerLegal"></div>
<div id="footerLinkedin"></div>
<div id="footerLeftPadding"></div>
<div id="footerFacebook"></div>
<div id="footerRightPadding"></div>
<div id="footerTwitter"></div>
<div id="footerCopyright"></div>
<div id="footerDesign"></div>
<div id="footerRight"></div>
</div>
CSSコード
#footer {
float:left;
height: 50px;
width: 1200px;
}
#footerLeft{
float:left;
height: 50px;
width: 90px;
}
#footerMap{
float:left;
height: 25px;
width: 366px;
}
#footerLegal{
float:left;
height: 25px;
width: 366px;
}
#footerLinkedin{
float:left;
height: 50px;
width: 48px;
background-image:url(images/footer/web_page_footer_03.png);
background-repeat:no-repeat;
}
#footerLeftPadding{
float:left;
height: 50px;
width: 22px;
}
#footerFacebook{
float:left;
height: 50px;
width: 48px;
background-image:url(images/footer/web_page_footer_05.png);
background-repeat:no-repeat;
}
#footerRightPadding{
float:left;
height: 50px;
width: 22px;
}
#footerTwitter{
float:left;
height: 50px;
width: 48px;
background-image:url(images/footer/web_page_footer_07.png);
background-repeat:no-repeat;
}
#footerCopyright{
float:left;
height: 25px;
width: 366px;
background-image:url(images/footer/web_page_footer_08.png);
background-repeat:no-repeat;
}
#footerDesign{
float:left;
height: 25px;
width: 366px;
background-image:url(images/footer/web_page_footer_10.png);
background-repeat:no-repeat;
}
#footerRight{
float:left;
height: 50px;
width: 90px;
background-image:url(images/footer/web_page_footer_09.png);
background-repeat:no-repeat;
}