I've been trying to do something extremely simple, yet I can't make it work!

Here's what I'm trying:

---margin top: 15 px

---VARIABLE HEIGHT DIV (imagine a box-like element)

---margin bottom: 15px

I basically want the box to resize based on the browser window height.

Here's what I've been trying:

**CSS**

```
 body {
    background-color: #D0CDC5;
    height:100%
}

 #info_box {
    background-color: rgba(40,40,40,0.5);
    border: rgba(34,34,34,0.9) 1px solid;
    width: 350px;
    height: 100%;
    margin: 15px 0px 15px 20px;
}

 #info_box p {
    color: red;
} 
```

**HTML**

```
<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>

```

By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?

Thanks a lot guys,

\*\*EDIT

See this link, very good answer for all browser but IE6 and 7. [another HTML/CSS layout challenge](https://stackoverflow.com/questions/5768029/another-html-css-layout-challenge/5768262#5768262)
Thanks to @Hristo!