HTML issues with increasing div's width dynamicaly

Question

Hi there,

I'm trying to make a div's width to be automatically increased/decreased based on it's child elements width inside the div. However the elements inside always overflow outside the div as if they were standalone elements.

    <div id='item_stats_info'>
        <div id='item_name'> Name </div>
        <div id='item_attr1'> Attribute </div>
        <div id='item_req_lvl'> Level X</div>
        <div id='item_buy_cost'> 
            <div> 
                4000000 <img src="path_to_img"> 
                 10 <img src="path_to_img"> 
             </div> 
        </div>
    </div>

see more here:

Fiddle

Can anyone help me with this?

Answer 1

In your css, remove the width: 90px; and add float: left;

Answer 2

Replace this in your css:

div#item_stats_info {
        background-color: rgba(41, 53, 59, 0.4);
        border: 1px solid #000;
        color: black;
        float: left;
        min-height: 100px;
        min-width: 80px;
        opacity: 1;
        padding-top: 2px;
        position: relative;
        text-align: left;
        /*width: 90px;*/
        z-index: 25;
    }