Can't find element's real width.

rohypnol

I have the following html structure and style:

Expand|Select|Wrap|Line Numbers

 <style type="text/css">

  #master {

    width: 200px;

    border: 1px solid black;

    white-space: nowrap;

  }

  #container {

    border: 1px solid red;

  }

  #list li {

    display: inline;

    border: 1px solid blue;

  }

</style>
 
<div id="master">

<div id="container">

  <ul id="list">

    <li id="element1">content1</li>

    <li id="element2">content2</li>

    <li id="element3">content3</li>

    <li id="element4">content4</li>

    <li id="element5">content5</li>

    <li id="element6">content6</li>

  </ul>

</div>

</div>

Is there any way to get the real scrolling width of the #container or #list elements? On Firefox 3.0.x, I get 200px for scrollWidth, clientWidth and offsetWidth (and the getWidth() function in Prototypejs), but it's clearly visible that the real width on my screen is about 600px.

Thanks,
Tom

drhowarddrfine

I don't recall exactly what those do but 200px should be correct since it's contained in #master. The fact that they overflow the div, being inline, doesn't matter, I guess, since it is the div that would get the scroll and not the list itself.

Can't find element's real width.

re: Can't find element's real width.

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about