HTML CSS テーブルの表示方法

解決済

質問者：tayanakashi
質問日時：2010/05/26 15:05
回答数：2件

HTML CSS テーブルの表示方法
JSP・CSSを使用して、テーブルの下に文字を表示したいと思っています。
諸事情有りまして、tableタグは使用せずCSSで解決したいと思っています。
以下よりjspです。
<body id="top">
<div id="container">
<div id="innerContainer">
<div id=header">
<h1><a href="logo.htm"><img src="images/logo.gif" alt="ロゴ" name="logo" id="logologo" /></a></h1>
<ul id="header_menu">
<li><a href="map/take.htm">テイク</a></li>
<li><a href="map/index.htm">地図</a></li>
</ul>
</div>
</div>
</div>
<form name="myForm" onsubmit='toList()'>
<%= new java.util.Date() %>
<Input Type="submit" Value="送信"">
</form>
</body>
以下よりcssです。
body {
width: 1100px;
height: 2000px;
background-color: lightGreen;
}

#header {
width: 210px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
border: 5px;
text-algin: center;
}

#logologo {
width: 150px;
height: 50px;
border: none;
margin: 1px;
float: left;
text-algin: left;
border: solid 5px;
}
#header_menu {
width: auto;
height: auto;
border: none;
margin: 1px;
float: left;
text-algin: left;
border: solid 5px;
}

この状態ですと、テイクの真横に現在日時と送信ボタンが表示されてしまいます。
この日時と送信ボタンをロゴの下に表示されるようにするにはどのように記述すればよいでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： outbrave
回答日時：2010/05/26 15:54

float は、指定した要素を左または右に配置して、後に続く内容を回り込ませるものなので

float を使用している部分が回り込むものではありません。
ですから、解除したい場所で、clear する必要があります。

</ul>
</div>
<div class="clear"></div>
</div>
</div>

.clear {
clear: both;
height: 0;
}

上記は結構使われてるパターンです。