<html>
<head>
  <title>Div example</title>
</head>
<body>

<style type="text/css"> 
.container { 
  margin: 0 20%;
/*  
  width: 200px;
  height: 200px;
*/  
  background: #00FF00; 
}

.text {
  padding: 0px 5px;
}

.top, .bottom{
  display:block;
  background: #FFFFFF;
}

.top div, .bottom div{
  display:block;
  height: 1px;
  overflow: hidden; 
  background: #00FF00;
}

.row1{
  margin: 0 5px;
}

.row2{
  margin: 0 3px;
}

.row3{
  margin: 0 2px;
}

.row4 {
  margin: 0 1px;
  height: 2px
}
</style>

<div class="container">
  <div class="top">
    <div class="row1"></div>
    <div class="row2"></div>
    <div class="row3"></div>
    <div class="row4"></div>
  </div>
  <div class="text">
    Aliquam erat volutpat. Pellentesque luctus molestie elit. Donec eu odio. 
    In vel leo dapibus diam tristique egestas. Class aptent taciti sociosqu ad litora torquent 
    per conubia nostra, per inceptos hymenaeos. Nam elementum dignissim urna. Sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sed nisl. 
    Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
  per inceptos hymenaeos.
  </div>
  <div class="bottom">
    <div class="row4"></div>
    <div class="row3"></div>
    <div class="row2"></div>
    <div class="row1"></div>
  </div>
</div>

</body>
</html>