get div current (rendered) width with javascript.

Question

Hey, Ive got an php script dragging some images from a database and displaying them using float:left; so they go left to right.

However unless in the css i define i width for the container they jump down onto a 2nd line.

So the question IS!

How for the life of me could I get it to figure out the width of the content and then set the width attribute via javascript all on the one load.

I did have a slight worry that this wouldnt be easily possible as it wud have had to render the images/layout first to get a width before then adjusting it.

Ideas please people!! x

Answer 1

Using Javascript:

1. How to get the div element

   var thediv = document.getElementById("thedivid");

2. How to get the current width of the div

   var currentwidth = thediv.style.width;

3. How to set a new width on the div

   thediv.style.width = "200px";

Answer 2

Your question has to do with how the flows of floats work...

If two images are floated and the sum of their widths is wider than the containing element, they will wrap (similar to the way words in a paragraph wrap).

Visual references describing the flow of "float"ed elements (way too difficult to describe in a few words):

• http://css.maxdesign.com.au/floatutorial/introduction.htm