JQuery width() does not return correct value

Question

I have a div that has not a preset width in css, I'm trying to center in on screen with JQuery, it works in Chrome, Firefox and IE8+, but does not work in IE7. Why?

css:

.productBoxWrapper{
    height:210px;
    clear:both;
    background-color:blue;
}

JQuery:

$('#mydiv').css("position", "absolute");
this.css("left", ($(window).width() - $("#mydiv").width()) / 2 + "px");

JSFiddle: http://jsfiddle.net/tygcz/3/

Do you have an containing divs with padding/margin? you may need to use .outerWidth() instead to take account of padding and borders. — Wez
– Wez, Commented Feb 25, 2013 at 13:23
do you really need to support IE7? This is just one of hundred of problems and wasted time you will have when supporting IE7. — letiagoalves
– letiagoalves, Commented Feb 25, 2013 at 13:24
Google dropped support for IE7 last year so when developing a new website don't bother making it work. IE7 is old, it updates automaticly to 8 on all windows. less then 2% of the users still use IE7. Not interesting to waste alot of time on — s.lenders
– s.lenders, Commented Feb 25, 2013 at 13:30

Glorious Kale · Accepted Answer · 2013-02-25 13:24:36Z

1

Try to center it like this:

Css:

#myDiv{
     position: absolute; top: 50%; left: 50%;
}

Script:

$('#myDiv').css('marginLeft', - ( parseInt( $('#myDiv').width() ) / 2) + 'px' );
$('#myDiv').css('marginTop', - ( parseInt( $('#myDiv').height() ) / 2) + 'px' );

I'm not sure weather parseInt is really needed.

answered Feb 25, 2013 at 13:24

Glorious Kale

1,31315 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery width() does not return correct value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related