jQuery window resize issue while scrollbar appears

Question

When I display the page index.php only the 4 columns of THE div id .box appears instead of 5. . From the other side, the 5 columns of THE div id .box appears when I MINIMIZE and MAXIMALIZE the window . I spent around 4 hours and I noticed that all is good when I instead of put overflow:auto; to #panel I put overflow:scroll;. And then all is nice. On page load I get all 5 columns , and on minimize and maximize window i got 5 columns too. But I do not want to have this bar from overflow:scroll at the bottom of a #kontener. Is there another way to do it? I vote up. Thanks! /edit I forgot to say that all is good if there are only some of boxes on the page untill there are not as many of them untill scrollbar appears.

Not working example: http://jsfiddle.net/MtUWn/509/

I have the following code: style.css

#panel{position:absolute;top:72px;left:0px;right:0px;bottom:50px;overflow:auto;}/*overflow:scroll;*/
    #kontener{overflow:hidden;}
    .box {display:block;float:left;}
    .box_in {margin:5px;padding:5px;height:260px;border:1px solid grey;}

index.php

<script type="text/javascript">

    function onResize() {
        var cw = $('#kontener').width();
        $(".box").width(cw / 5);
    }

    $(window).load('resize', onResize);
    $(window).bind('resize', onResize);

</script>

<div id="panel">    
    <div id="kontener">
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
    </div>
</div>

Answer 1

You can make the same effect without the need for jQuery, just CSS by using width: 20% on .box (see question comments)

http://jsfiddle.net/MtUWn/516/