Question

I have two <div>, one nested into the other defined like this:

<div class="wrapper">
    <div class="content">
        [..] Content [..]
    </div>
</div>

The css:

#div.wrapper
{            
    width: 660px;
    overflow: hidden;
    float: left;
}
#div.content
{
    white-space: nowrap;
}

The effect is what i want, the content lays down horizontally within the inner but is hidden when it exceeds, (i then scroll it with jQuery).

Since I don’t know the content of .content (nor it is predictable), I need to know the real width of it (defined by the content), but both .width() and .innerWidth() give me the same result that is 660 when first called (like the container div) and 660 + x when I call it after having scrolled it by setting a negative margin-left (x is the left shift set with the margin).

How to get the real, content dependent width of the element? Thanks

Answer 1

Divs by default take full width in their parent, so width will always be the width of the parent.

If you don’t want that, you would use

#div.content
{
    white-space: nowrap;
    display: inline-block;
}

or possibly

#div.content
{
    white-space: nowrap;
    float: left;
}

as to turn the #div.content element into an inline or float element respectively, which only takes up as much space as it needs (i.e. not necessarily all the space that the parent provides). So that should work!