Parent div won't resize vertically to take account of child divs

[maxiao]

I have read a lot of similar problems on other forums but none of them seem to solve the problem I’m having.

Below is the basic structure:

<wrapper>
<main_content>
<child1></child1>
<child2></child2>
<child3></child3>
</main_content>
</wrapper>

I have tried everything but at the moment:

1) the wrapper div is positioned absolutely (in relation to the page)and has a set width.

2) main_container div is relative (in relation to the wrapper div) which means its exactly the same size as the wrapper.

3) child divs positioned absolutely (in relation to main_container div)

Problem:

main_container div is not resizing vertically based on child divs. It only seems to resize based on

etc. elements inside it but that are not inside a child div. Why is this? THe positioning is working, its just it doesn’t take acount of the child divs contents.

I don’t want to start using any floats etc. Also, setting a minimum height for the main_container div defeats the the aim of having it resize vertically based on content.

Any ideas?

[Paulie_D]

Absolutely positioned elements are taken out of the flow and do not count towards their parent’s height. That’s the point of absolute positioning

Positioning is a very poor way of laying out a website and is very unforgiving and definitely unresponsive.

There are much better methods – http://learnlayout.com/

I don’t want to start using any floats etc.

I don’t know why, it’s a perfectly acceptable layout method but there are others.

They all have their issues but using positioning is intended (at least these days) for specific effects not supported by the ‘standard’ layout methods.

[Author]

Posts