容器宽度比内容大得多

Question

I have a bunch of content that floats left in a container, and I'd like for the container to hug the content, but for some reason it's much wider then the content and I have no idea why. I have it set up in a fiddle here http://jsfiddle.net/vG8NY/6/ the red and blue bordered containers should hug the right edge of the circle.

The code is very simple and is as follows:

HTML:

<div class="hot_spot-container">
    <div class="content-spot">
        <img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-left.png" />
        <div class="hotspot-content"></div>
        <img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-right.png" />
        <br class="clear-fix" />
    </div>
</div>

CSS:

.hot_spot-container {border:1px solid blue;
    position:absolute;
}
.content-spot {
     border:1px solid red;
     display:inline-block;
}


.hotspot-cir {
    float:left;
    height:100%;
    width:auto;
}
.hotspot-content {
    float:left;
    background:#ec6e47;
}
.clear-fix {
    clear:both;
}

JS

$(".content-spot").css({
    height:$(window).height() * ".2"    
});

Answer 1

try this:

$(".content-spot").css({
    height:$(window).height() * ".2",
    width:$(window).height() * ".2"
});

when you change height of content-spot it's width still fixed and need to get resize too.

DEMO

---

you can use this code too:

$(".hotspot-cir").css({
    height:$(window).height() * ".2"    
});

DEMO

Answer 2

You must define the width for the element to which you have set the position: absolute; so you should use something like this:

.hot_spot-container {border:1px solid blue;
    position:absolute;
    /* any width you want or if you don't know the width then define auto.*/
    width: 45px; 
}

Answer 3

if you make

.hot_spot-container {display:inline-block}

instead of it having position:absolute it does what you want it to. if you want position absolute you need to give it a width

Answer 4

Try this

I removed your javascript and made this changes

.content-spot {
    border:1px solid red;
    display:inline-block;
    width: auto;
}

.hot_spot-container {
    border:1px solid blue;
    position:absolute;
    display: inline-block;
}