CODEWITHSUNDEEP
csswidth
gyaani_guy
gyaani_guy

Reputation: 3209

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

Upvotes: 23

Views: 145099

Answers (5)

atfergs
atfergs

Reputation: 1684

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

Upvotes: 15

and-bri
and-bri

Reputation: 1664

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.

Upvotes: 9

Amit
Amit

Reputation: 7838

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!

Upvotes: 1

stoneMonkey77
stoneMonkey77

Reputation: 175

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.

Upvotes: 0

Gordon Gustafson
Gordon Gustafson

Reputation: 41259

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.

Upvotes: 4

Related Questions