CODEWITHSUNDEEP
htmlcss
cereallarceny
cereallarceny

Reputation: 4983

Wrapper re-size

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.

Upvotes: 0

Views: 641

Answers (2)

thirtydot
thirtydot

Reputation: 228182

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/

Upvotes: 2

jeroen
jeroen

Reputation: 91744

You are using absolute positioning for the contents of the wrapper, #container and that takes it completely out of the document flow. The same applies to the contents of your header.

The only way to get your wrapper to wrap, is using javascript to calculate and set the height manually.

Upvotes: 2

Related Questions