I am using this system to try to implement a sliding window selector.
I have a <div> that is contained in another <div>. The outer <div> has a fixed size and the inner one should expand to contain its contents.

<div style="width: 25px; overflow: hidden">
    <div id="middle">
        <div style="width: 50px"></div>
    </div>
</div>

The outer <div> has a fixed size.
The middle <div> should expand to match the size of the inner <div> (the one that has width 50px)
How, using CSS or JavaScript can I ensure that the middle <div> is as wide as the inner <div>, but still gets cut off by the outer <div>?

I have tried to use JQuery to get the length of the inner <div> and then dynamically set the width of the middle <div>, but this does not consistently get the right length.

I am using this system to try to implement a sliding window selector.
I have a <div> that is contained in another <div>. The outer <div> has a fixed size and the inner one should expand to contain its contents.

<div style="width: 25px; overflow: hidden">
    <div id="middle">
        <div style="width: 50px"></div>
    </div>
</div>

The outer <div> has a fixed size.
The middle <div> should expand to match the size of the inner <div> (the one that has width 50px)
How, using CSS or JavaScript can I ensure that the middle <div> is as wide as the inner <div>, but still gets cut off by the outer <div>?

I have tried to use JQuery to get the length of the inner <div> and then dynamically set the width of the middle <div>, but this does not consistently get the right length.

• javascript
• jquery
• html
• css

• 1 Your span can't have a fixed width. Try using another div. – Blender Commented Dec 14, 2011 at 22:37
• @Blender, sorry the span is full of text that is longer than the outer div. I just used the width to show a quick example. – chustar Commented Dec 14, 2011 at 22:39
• Your code should work fine just the way it is, then. – Blender Commented Dec 14, 2011 at 22:40
• In fact, it does: jsfiddle/4F5yc/1 – Ateş Göral Commented Dec 14, 2011 at 22:41
• @AtesGoral: I changed the question to be clearer. The problem is that the middle <div> should be as wide as the inner one. – chustar Commented Dec 14, 2011 at 22:47

6 Answers 6

Div elements, by default, try to fit their container. so the middle one will try to fit its container which is the outer div.. it is not affected by content.

If you set the middle one to be display:inline-block you make it fit the contents instead of the container it that fixes the issue..

Can you make inner div float? That way it should display full width of the span but without editing outer div width to expand the content longer than outer div width will be invisible.

divs are block elements, so your inner div will naturally expand to the width of the containing div. You can ensure this by setting the style attribute of the inner div to 100%. You should also set its overflow CSS property to "hidden."

You can get the width of the content of any HTML object like this:

document.getElementById("myDIV").clientWidth

Use display: inline-block and max-width: ?px on middle. You'll want to put overflow-x: hidden on middle (not outer like in your code), but I left it off in the demo so you could see the width working.

Demo: http://jsfiddle/ThinkingStiff/hHDQS/

HTML:

<div class="outer">
    <div class="middle">
        <div id="inner1"></div>
    </div>
</div>

<div class="outer">
    <div class="middle">
        <div id="inner2"></div>
    </div>
</div>

CSS:

.outer {    
    border: 1px solid green;
    height: 100px;
    width: 300px;
}

.middle {
    border: 1px solid red;
    display: inline-block;
    height: 75px;
    max-width: 300px;
}

#inner1 {
    border: 1px solid blue;
    height: 50px;
    width: 50px;
}

#inner2 {
    border: 1px solid blue;
    height: 50px;
    width: 350px;
}

Output:

If the inner div can be absolutely positioned the following will stretch it to fill up the parent pletely (width and height):

#myInner{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:auto;
  height:auto;
}