Getting the width of a div element

Question

HTML:

<a id="postanad" href="postad.php">Make a Post</a> 

CSS

 #header #postanad { position: absolute; top: 50px; left: 250px ; background: #000 url(postad.gif) repeat-x 0% 100%; font: bold 19px Tahoma, 'trebuchet MS', Sans-serif; padding: 5px; } 

How to determine the size in pixels / em that a div element takes so that I can make the background image postad.gif equal to one width?

Just to be clear, I don't want to dynamically determine the width, but just want to know how much space it takes to draw a background image in PS.

Answer 1

If you are interested in measuring the width of an element on a page, you can use the Measure IT addon in Firefox:

https://addons.mozilla.org/en-US/firefox/addon/539/

Answer 2

If you like jQuery, you can just use $ ("# postanad"). width ().

Answer 3

CSS is not a "programming language." You cannot make decisions, collect data, or manipulate what was not designed for the language. If you want to do this, javascript is your best bet.

What exactly do you want to do with the background? We can help you get a CSS-only solution if we know your requirements.

Answer 4

Is a dynamic div call considered? Because if not, the easiest way is to set the height and width in the style of #header #postanad.

Answer 5

The jQuery method, for example, @ orthod0ks said, will use the width () function. The CSS method would have to declare width and height

OR, another CSS way:

You can also put the background in a div (for example, background: red; ), take a screenshot and paste it into the PS to see how big it is.

Finally, Firefox has a plugin called (MeasureIt). This is pretty useful for sizing things in pixels. Therefore, you should study that if both solutions are not viable for you.

Good luck