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
– Robert, Commented Jan 13, 2011 at 13:58

Darkk L · Accepted Answer · 2024-02-13 15:16:00Z

15

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

edited Feb 13, 2024 at 15:16

Darkk L

1,0391 gold badge7 silver badges17 bronze badges

answered Jan 13, 2011 at 14:00

atfergs

1,6821 gold badge11 silver badges17 bronze badges

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

Comments

and-bri · Accepted Answer · 2018-05-25 20:00:35Z

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.

Gordon Gustafson · Accepted Answer · 2011-01-13 14:01:12Z

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.

You can manipulate the width value with calc to get a number

Amit · Accepted Answer · 2011-01-13 16:22:06Z

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!

stoneMonkey77 · Accepted Answer · 2011-01-13 14:35:03Z

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.

Collectives™ on Stack Overflow

getting width of a div element

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Linked

Related