Question

Im trying to have a page widen as the div gets wider. Im using C# , win forms and jquery. I have a repeater inside a div and each repeater item has a div with a set width and height set to 100%. I have all the divs set to float left. in chrome the page gets wider but in ie7, 8, 9 and FF the page doesnt get wider. currently we are in a process of moving our site over to use .less. the importance of this is that the page has a set width. In our instance we need to have the page grow wider.

Ive looked at setting the divs to display inline-block but that leaves white spaces between the divs. Ive seen a few ways around this by giving a negative margin or how the divs are arranged in the markup but Im not really a fan.

If you go to jsfiddle with the follow parameters i have an example. Im on mt tablet and for some reason i cant add a link.

/brad8118/7Wf2j/

<div id="outer">
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>

#outer{
Height:30px;
Border: 1px solid black;
}

div{
Float: left;
}

.inner{
border: 1px solid red;
Background-color: green;
Width: 20px;
Height: 100%;
}

The inner divs are the ones created by the repeater.

Thanks

Answer 1

you can try something like this

jQuery extension:

(function ($) {
//calculates the total width of the elements selected
$.fn.sumWidth = function () {
    var sum = 0;
    this.each(function () {
        sum += $(this).width();

    });

    return sum;
};

})(jQuery);

then you can use it like this:

$(function(){$('#outer').width($('#outer .inner').sumWidth());});

this will then set the outer div width to the total width of the inner div’s width