CSSでのfloatの基礎練習
CSSでのfloatのつかい方を学習したがイマイチわかっているのかわかっていないのか・・・
思ったように動いてくれないのでもどかしい気持ちでいっぱいのままコード書いてみました。
HTMLだけで書いたので少し省略はしてます。
<div id="topbox">
<div class="purple"></div>
<div class="olive"></div>
</div>
<div id="wrapper">
<div class="red"></div>
<div class="bule"></div>
<div class="black"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="pink"></div>
</div>
<div id="bottom">
<div class="navy"></div>
<div class="lime"></div>
</div>
<style>
header{
float: left;
}
#wrapper{
width: 600px;
height: 600px;
}
#bottom{
margin-top: -200px;
}
.purple{
background-color:purple;
width: 300px;
height: 100px;
float: left;
}
.olive{
background-color: olive;
width: 300px;
height: 100px;
float: right;
}
.red{
background-color: #ff0000;
width: 200px;
height: 200px;
float: left;
}
.yellow{
background-color: yellow;
width:200px;
height: 200px;
float: left;
}
.bule{
background-color: blue;
width:200px;
height: 200px;
float: left;
}
.green{
background-color: green;
width:200px;
height: 200px;
float: left;
}
.black{
background-color: black;
width:200px;
height: 200px;
float: left;
}
.pink{
background-color: pink;
width:200px;
height: 200px;
float: left;
}
.navy{
background-color: navy;
width: 300px;
height: 100px;
float: left;
}
.lime{
background-color:lime;
width: 300px;
height: 100px;
float: right;
}
</style>
