TOP > CSS > ボックスを横に並べる

ボックスを横に並べる

ブロックレベル要素である、<div>や<table>はソースコード上で並べても下に並んでいきます。 ですが、float属性を使用することで横に並べる事が可能になります。

<html>
<head>
<title>プレビュー</title>
<style type="text/css">
<!--
#box1{
border: 2px solid;
width: 150px;
height: 100px;
margin-right: 50px;
float: left;
}

#box2{
border: 2px solid;
width: 150px;
height: 100px;
float: left;
}

-->
</style>
</head>
<body>

<div id="box1">
box1
</div>

<div id="box2">
box2
</div>

</body>
</html>

box1
box2
注意事項

float属性は、text-align属性と違って値に「center」を使う事ができません。

ワンポイント

floatを解除する時には、clear属性を使用します。
値には、「left」「right」と、両方解除する「both」があります。
clear属性は次にくる要素に入れてもいいのですが、
空の<div>を用意しそこにclear属性を適応される方法がお勧めです。