* { margin:0; padding:0; } body { background:pink; } #top { width:100%; height:60px; background:white; } #top>p { line-height:60px; float:left; font-weight:bold; padding:0 0 0 10px; } #top>.theme { width:240px; float:left; height:60px; margin:0 10px; } #top>.theme>div { width:40px; height:40px; margin:10px 20px; border-radius:5px; float:left; } #top>.theme>div:hover { box-shadow:0 0 10px tan; cursor:pointer; } #top>.theme>div:nth-child(1) { background:pink; } #top>.theme>div:nth-child(2) { background:teal; } #top>.theme>div:nth-child(3) { background:tomato; } #top>.now { width:auto; float:left; height:60px; margin:0 30px; } #top>.now>p { display:block; float:left; line-height:60px; margin:0 20px; font-weight:bold; } #top>.now>.background,#top>.now>.color { float:left; } #top>.now>.background>p,#top>.now>.color>p { line-height:60px; float:left; } #top>.now>.background>div,#top>.now>.color>div { float:left; width:40px; height:40px; margin:10px; border-radius:5px; border:1px solid #333333; } #title { width:100%; height:100px; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; text-align:center; font-size:2em; letter-spacing:10px; font-weight:bold; }