Untitled

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='/js/lib/mootools-core-1.4.4.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
body {
    background: url('http://aux.iconpedia.net/uploads/1076620058994777287.png') no-repeat top right #b0c4de;
}

* {
  margin: 0;
  padding: 0;
}

#box {
  font: 20px Georgia;
  border: 2px  groove gray;
  border-radius: 6px;
  text-transform:  capitalize;
  color: white;
  text-align: center;
  margin: 40px 150px;
  width: 500px;
  height: 400px;
  background: #bfbfbf;
  text-height: 200px;
  overflow: hidden;
}

#a {
  background: red;
}
#b {
  background: green;
}
#c {
  background: yellow;
}
#d {
  background: purple;
}
#e{
  background: orange;
}
#f{
  background: violet;
}
#g{
  background: pink;
}
#h{
  background: RoyalBlue;
}
#i{
  background: blue;
}

#a, #b, #c, #d, #e, #f, #g, #h, #i {
    height: 24px;
}
  </style>

</head>
<body>
<div id="box">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f">make me a coffe</div>
<div id="g"></div>
<div id="h">paletas são tão legais! :)</div>
<div id="i"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="a"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div>
<div id="a"></div>
</div>

</body>


</html>