Positionで作るCSS
制作時間40分
だいぶ時間がかかってしまった。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"lang="ja"> <head> <meta http-equiv="Content-Type"content="text/html;charset=utf-8"/> <meta http-equiv="Content-Style-Type"content="text/css"/> <title>両側を跨ぐフッターを配置する</title> <style type="text/css"> <!-- body { text-align: center; } #container { width: 760px; margin: 0 auto; text-align:left; background-color: #123456; } #header { background-color: #DDDDDD; height: 50px; } #wrapper { position:relative; margin: 10px 0; background-color: #654321; width: 100%; } #primary { margin-left:210px; width: 550px; background-color: #C7D5ED; } #secondary { position:absolute; left: 0px; top: 0px; width:200px; background-color: #F9CFBA; } #footer { background-color: #7865AA; height: 50px; } --> </style> </head> <body> <div id="container"> <div id="header"><br/></div> <div id="wrapper"> <div id="primary"><br/><br/><br/><br/><br/><br/><br/><br/><br/></div> <div id="secondary"><br/><br/><br/><br/><br/><br/><br/><br/><br/></div> </div> <div id="footer"><br/></div> </div> </body> </html>