Why won't wrapper div expand when it has an absolute child div

Question

I have a wrapper div set to 960px and inside it, I have another div called "slider". Slider is positioned absolutely in the middle of the screen using this code:

#slider {width:390px; height:100px; position:absolute; 
         margin:-100px 0 0 -200px; top:50%; left:50%; border:1px solid;}

I have added borders to both the wrapper and slider divs so that I can see how they are positioned on the screen however, this has revealed that the wrapper is not expanding to contain the absolute slider div.

How do I fix this so that the height of the wrapper is correct?

Charybdis

You should create a jsfiddle.net testcase to make easier people to help you. From the top of my head I'd tell you to make the wrapper position:relative and position the child margins relative to wrapper not the entire page. – Intangible

Share the code for your wrapper div too. Do you have overflow:auto in wrapper? – Electroform

Answer 1

When you use position:absolute; on an element it is position outside of the document flow and does not impact on the other content.

If you can, remove position:absolute; and use other methods to center your slider div. If you need the position:absolute; then it is not possible.

Bandylegged

what other methods can I use to position the DIV in the centre witouht absolute positioning? – Charybdis

You can use several methods, margin:auto is a popular method. See https://mcmap.net/q/36071/-how-can-i-horizontally-center-an-element and w3.org/Style/Examples/007/center.en.html for more info on the details. – Bandylegged