getting width of a div element

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 开发者_StackOverflow社区do I determine the size in pixels/ems that the div element is taking so that I can make the background image postad.gif to be of the same width?

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

If you're comfortable with jQuery, you can just use $("#postanad").width().

If somebody wants just to get the width of a div with simple javascript use:

document.getElementById('div_id').clientWidth;

for more possibilitys have a look here.

CSS isn't a 'programming language'. You can't really make decisions, gather data, or manipulate anything the language wasn't designed to do. If you want to do that, javascript is your best choice.

What exactly do you want to have happen with the background? We might be able to help you get a CSS only solution if we know your requirements.

The jQuery way, like @orthod0ks said would be to use the width() function. The CSS way would be to declare a width and height

OR, another CSS way would be to:

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

Lastly, Firefox has a plugin called (MeasureIt). It is rather useful for determining sizes of things in terms of pixels. So you should look into that if both solutions are not viable for you.

Good luck!

Is the div in question being redrawn dynamically? Because if not, the easiest thing is to set the height and width in the #header #postanad style.