Javascript Getting Width Of Browser And Width Of Element

So I am not a coder but I need to center a fixed

. I tried adding left:auto right:auto in my css it didnt work. So basically I wanted to do it in javascript and take th

Solution 1:

please use -

$(window).width();

instead of $(window).width(function());

Update

see this - http://jsfiddle.net/ngGzX/3/

Solution 2:

You can perfectly well center content in CSS these days, without client side scripting.

If you merely want to center content inside a larger container horizonatally, you can simply apply the following rule to the content element:

margin: 0 auto;

Note that the above will set top and bottom margins to zero, but the most important effect is of course that it makes the browser calculate left and right margins as equal and divide the available margin space between the two, in effect centering the element (http://www.w3.org/TR/CSS21/visudet.html#blockwidth).

If you want to center content vertically as well, you can use CSS table rendering capabilities:

<divstyle="display: table"><divstyle="display: table-cell; vertical-align: middle"><divstyle="margin: 0 auto">Nunc mollis volutpat tincidunt. Nunc ultrices feugiat ipsum, vulputate pellentesque urna pharetra at. Duis auctor, mauris a molestie blandit, felis enim tempus mauris, nec elementum dolor felis vel purus. Morbi vel tellus et velit tempus semper in eget nunc. Integer quis lacus justo. Pellentesque adipiscing, elit id lobortis ultricies, ante diam vulputate arcu, a egestas mauris diam quis metus. Maecenas iaculis urna a nulla iaculis a faucibus eros imperdiet. Maecenas ipsum libero, placerat a consectetur sit amet, mattis vel nisi. Donec laoreet porttitor pulvinar.</div></div></div>

The above is a suggestion - I stripped it down to the required minimum for it to work. If you merely paste it in an empty document, you may not see the desired effect because you need to set up width and height of the container (an HTML page is by default height: auto which means it is as small as to fit its content) and perhaps also the width and/or height of the innermost element.

The outer element - the one that has display: table - doesn't have to be a div - it can be the body element for instance. You need to have display: table on an outer element, because otherwise display: table-cell in descendant elements does not work. The display: table-cell rule allows for vertical-align: middle to have the intended effect here - position the innermost element (the one with margin: auto) vertically in the middle. Finally, margin: auto has the same effect as before - the innermost element is positioned horizontally in the middle as well.

Depending on your layout, you might need to specify widths and/or heights to your liking, but the above is a functioning and very flexible template that works for elements of known and unknown sizes, as part of so-called "dynamic" or "floating" layout.