getting 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 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.

it will be different for every client with a different set up. — Robert, Jan 13 '11 at 13:58

score 15 · Answer 1 · answered Jan 13 '11 at 14:00

15

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

answered Jan 13 '11 at 14:00

atfergs

1,674
1
11
17

score 9 · Answer 2 · answered May 25 '18 at 20:00

9

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.

answered May 25 '18 at 20:00

and-bri

1,563
2
19
34

score 4 · Answer 3 · answered Jan 13 '11 at 14:01

4

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.

answered Jan 13 '11 at 14:01

Gordon Gustafson

40,133
25
115
157

3

although it seems to allow notion of variables – juztcode Jan 04 '21 at 12:20
2

You can manipulate the width value with `calc` to get a number – Saiansh Singh May 02 '21 at 00:15

score 1 · Answer 4 · answered Jan 13 '11 at 16:22

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!

score 0 · Answer 5 · answered Jan 13 '11 at 14:35

0

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.

answered Jan 13 '11 at 14:35

stoneMonkey77

175
4

getting width of a div element

5 Answers5

Linked