[Frodo Baggins]

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:

Code:

<div id = "bigcontainer">
    // Generate the header
   <div id = "smallercontainer">
      //Generate the post
   </div>
</div>

The style sheet has this:

Code:

#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?

I should mention that this uses the wordpress blog software. But this is not a wordpress problem.

[seadave77]

Maybe because the index is calling "bigcontainer" and the CSS is calling "largecontainer".

[Frodo Baggins]

Originally Posted by seadave77

Maybe because the index is calling "bigcontainer" and the CSS is calling "largecontainer".

Surprisingly, no I just cleaned up the code and renamed stuff to make it easier to understand -- that was a mistake.

But fortunately, I think I solved the problem [2 minutes ago]. Dunno how, but who cares, if it works, it works.

So consider this thread closed.