Simple Problem with Borders (Simpler Version)

Here is a very simple problem:

I need a large container, width: 900 px, that will envelope my blog. Inside this large container is a header, floated at the top. Below the header is a smaller container.

Index file looks like this:
<div id = “bigcontainer”>
// Generate the header
<div id = “smallercontainer”>
//Generate the post
</div>
</div>

The style sheet has this:
#largecontainer
{
width:900px;
margin:0 auto;
padding:0px 3px;
border: thick solid #FF0000;
}
#smallercontainer {
position:absolute;
top: 194px;
overflow: hidden;
display:inline;
}

Here is the simple problem. When the above is generated, I get a big red border, but ONLY around the header file. When smaller container is not positioned absolutely (the line is removed), then the red border surrounds everything. Why is this happening? Why does my big container not contain the little container?