トップページ >  Style Sheet >  floatでレイアウト
初版2009/05/26: 最終更新日2009/05/26
floatでレイアウト
目次
floatでレイアウト
floatを指定する場合は、width属性も指定する
サンプル
floatでレイアウト
CSSでレイアウトする場合、floatを必ず使用します。
2段組やサイドバーなどはfloatで実現します。


floatを指定する場合は、width属性も指定する
floatはdiv要素などを回り込ませる属性なのでwidthの指定もする必要があります。
widthを指定しない場合、margin等を指定していたり4段組などの複雑なレイアウトをする場合に正しくレイアウトされません。
widthはmargin等も考慮して幅指定する必要があります。




サンプル
以下、サイドバーのサンプルです。
<html>
<head>
<style type="text/css">
<!--
.bar_left{
	float : left;
	width : 200px;
}
.bar_right{
	float : right;
	width : 200px;
}
-->
</style>
</head>

<body>
<div class="bar_left">
<A href="info/regist.html" target="_top">会社概要</A>
</div>
<div class="bar_right">
<A href="info/point.html" target="_top">お問い合わせ</A>
</div>
</body>
</html>