Question

I have a wrapper surrounding a header with content inside as well as a container with content inside. The wrapper is really on there to keep everything positioned to each other accordingly within the confines I set, as well as to center everything. I have my container to automatically re-size according to the content that goes inside of it, this works without issue. However, the wrapper around the header and the container won’t follow the same rule and ends up taking a height of 1px it seems. Please note: the code below will show the wrapper outlined by a dashed white border up at the top, it should instead wrap around everything it contains.

Here’s the code to the website on jsFiddle.

Any help would be greatly appreciated. I feel as though I closed all of my floats, I don’t see why the height: auto; on wrapper won’t work, but maybe there’s something I’m missing.

Answer 1

height: auto on #wrapper isn’t working because virtually every element inside it has position: absolute.

What does position: absolute do? http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

In the absolute positioning model, a
box is explicitly offset with respect
to its containing block. It is
removed from the normal flow entirely
(it has no impact on later
siblings). An absolutely positioned
box establishes a new containing block
for normal flow children and
absolutely (but not fixed) positioned
descendants. However, the contents
of an absolutely positioned element do
not flow around any other boxes.

The choices to fix your problem:

• Give #wrapper an explicit height – but that won’t work if you don’t know the height beforehand.
• As @jeroen said: use JavaScript to set the height of #wrapper.
• What you should really do is completely redo your CSS:
  position: absolute is not how you should position every element on the page. You should use floats instead.

For a comparison of using position: absolute vs floats, see:

http://www.htmldog.com/guides/cssadvanced/layout/