CSS floatを使用したのに要素が横並びにならなかった。
原因：親要素であるbodyタグの幅が500pxの一方で、子要素の幅が200px x3 = 600pxとなっていたため。
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
</body>
body{
font-family: 'Times New Roman', Times, serif;
width: 500px;
}
.box1{
background-color: bisque;
width: 200px;
height: 150px;
color: #ffffff;
text-align: center;
line-height: 150px;
border: solid 0px black;
float: left;
}
.box2{
background-color: rgb(29, 189, 29);
width: 200px;
height: 150px;
color: #ffffff;
text-align: center;
line-height: 150px;
border: solid 0px black;
float: left;
}
.box3{
background-color: rgb(91, 152, 231);
width: 200px;
height: 150px;
color: #ffffff;
text-align: center;
line-height: 150px;
border: solid 0px black;
float: left;
}
対策：bodyの幅を600px以上に変更 若しくは下記のように子要素であるbox1 box2 box3を幅600px以上
タグの子要素とする。
<body>
<div>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
</div>
</body>
body{
font-family: 'Times New Roman', Times, serif;
width: 500px;
}
div{
width: 900px;
height: 300px;
background-color: aqua;
position: relative;
}
/*.box1,2,3は省略*/