このCSSどこが間違ってる?中央揃えで二段組みみするには?
お世話になります。
CSS初心者なのでもしかしたら基本的な質問をしているかもしれませんがどうかお許しください。
現在、中央揃えコンテンツのサイトを作ろうとしているのですが、各コンテンツをdiv分けして内容部分となるコンテンツ(leftmenu/centermenu)を二段組みにしたいと思っています。ところが何故かcentermenuがleftmenuの下に表示されてしまいます。これがCSSのどこがおかしいのでしょう?一応本を読みながら書いたのですが、おかしいところがあったらどうか教えてください。
div#header{width:800px;
margin-left:auto;
margin-right:auto;
}
div#container{width:800px;
margin-left:auto;
margin-right:auto;
}
div#contens{width:800px;
margin-left:auto;
margin-right:auto;
div#leftmenu{width:157px;
float:left;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF}
div#centermenu{width:643px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF}
}
div#footer{width:800px;
margin-left:auto;
margin-right:auto;
clear:both;
}
body{background-attachment: scroll;
background-color: #990000;
background-image: url(bg-photo.jpg);
background-repeat: repeat-y;
background-position: center;
}
HTMLものせておきます。
</head>
<body onLoad="仮.jpg')">
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="133">
<param name="movie" value="top.swf">
<param name="quality" value="high">
<embed src="toonie-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="133"></embed>
</object>
</div>
<div id="container">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','home02.jpg',1)"><img src="home01.jpg" name="Image1" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','news02.jpg',1)"><img src="news01.jpg" name="Image2" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','company02.jpg',1)"><img src="company01.jpg" name="Image3" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','work02.jpg',1)"><img src="work01.jpg" name="Image5" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','result02.jpg',1)"><img src="result01.jpg" name="Image6" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','contact02.jpg',1)"><img src="contact01.jpg" name="Image4" width="133" height="53" border="0"></a>
</div>
<div id="contens">
<div id="leftmenu"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','vuk109-bottom2.jpg',1)"><img src="vuk109-bottom.jpg" name="Image7" width="157" height="69" border="0"></a><br>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','blog2.jpg',1)"><img src="blog.jpg" name="Image9" width="157" height="69" border="0"></a><br>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','link2.jpg',1)"><img src="link.jpg" name="Image8" width="157" height="69" border="0"></a></div>
<div id="centermenu">
<div align="left"><img src="index-bar.jpg"></div>
</div>
</div>
<div id="footer">
<div align="center">
<p><img src="line.gif" width="800" height="5"><br>Copyright (C) 2007 株式会社未定. All Rights Reserved.</p>
</div>
</body>
</html>
お礼
BLUEPIXYさま 要領得ない質問で申し訳ありませんでした。 >Aのセルのimgタグの順番がわかれば・・・ 解決しました。ありがとうございました。