2

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?

Nelson
  • 49,283
  • 8
  • 68
  • 81
Paul Gunston
  • 21
  • 1
  • 2
  • 1
    You should create a http://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. – Nelson Nov 07 '12 at 10:50
  • Share the code for your wrapper div too. Do you have overflow:auto in wrapper? – specialscope Nov 07 '12 at 10:51

1 Answers1

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.

Kami
  • 19,134
  • 4
  • 51
  • 63
  • what other methods can I use to position the DIV in the centre witouht absolute positioning? – Paul Gunston Nov 07 '12 at 23:58
  • You can use several methods, `margin:auto` is a popular method. See http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div and http://www.w3.org/Style/Examples/007/center.en.html for more info on the details. – Kami Nov 08 '12 at 02:11