Absolute positioning not working on Javascript DIV

Question

I've used some Javascript that slides a DIV up from the bottom of the webpage and I've tried to position it absolute bottom center.

The DIV at the bottom seems to be bottom left and I've tried to have it centered no matter what the browser window size is.

I'd have a look at this URL to see the page in question: http://s361608839.websitehome.co.uk/oneonly/index.html

HTML:

<div class="slide-out-div">
  <a class="handle" href="http://link-for-non-js-users">Content</a>
  <a href="mailto:name@domain.com">name@domain.com</a><br /><br />
  <p>Address</p>
  <p>Telephone</p>
</div>

CSS:

.slide-out-div {
  padding: 20px;
  width: 276px;
  background: url(images/kontakt-bg.png);
  color: #fff;
}

JS:

$(function(){
  $('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                        //class of the element that will be your tab
    pathToTabImage: 'images/kontakt-tab.png',    //path to the image for the tab (optionaly can be set using css)
    imageHeight: '26px',                         //height of tab image
    imageWidth: '316px',                         //width of tab image    
    tabLocation: 'bottom',                       //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                                  //speed of animation
    action: 'click',                             //options: 'click' or 'hover', action to trigger animation

    fixedPosition: false                         //options: true makes it stick(fixed position) on scroll
  });
});

Thanks!

I hope this helps, http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen — Muthu Kumaran, Sep 11 '12 at 13:04

score 0 · Accepted Answer · answered Sep 11 '12 at 12:56

0

Add

left: 50%;
margin-left: -138px; /* half its width which you have set to be 276px */

to .slide-out-div (works for me when editing live via developer tools).

answered Sep 11 '12 at 12:56

Ana

35,599
6
80
131

score 0 · Answer 2 · answered Sep 11 '12 at 12:58

0

You have to add a left position to the .slide-out-div

<div class="slide-out-div"
    style="line-height: 1; position: fixed; bottom: -124px; width: 300px; left: 50%; margin-left: -150px; ">

Where the negative margin is the half of the width.

answered Sep 11 '12 at 12:58

feeela

29,399
7
59
71

score 0 · Answer 3 · answered Sep 11 '12 at 13:00

0

add this to your .slide-out-div class

margin-left: -138px; /* half of the width of the div */
left: 50%;

answered Sep 11 '12 at 13:00

Jonathan Poh

26
2

Absolute positioning not working on Javascript DIV

3 Answers3