In my case childs number is returned from server side. In case there are less than 6 childs I need to add dummy child which would take left place of parent.

For example :

1 situation with two childs

fiddle

<div id="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="big-child"></div>
</div>
#container{
    width: 100%;
    height: 200px;
    background-color: gray;
}

#container > div {
    float: left;
    background-color: black;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.big-child {
    width: 59%!important;
    margin-right: 0px!important;
}

How could I achieve this with only CSS and withoud dinamically changing child width with javascript?

UPDATE

Found good website which generates CSS code depending on your boxes needs.

On modern browser you could use flexbox

http://codepen.io/anon/pen/yyMgQL

CSS:

#container {
    display: -ms-flexbox; /* IE 10 syntax */
    display: flex;
    width: 100%;
    height: 200px;
    background-color: gray;
}

#container > div {
    background-color: black;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

#container > div.big-child {
   -ms-flex-grow: 1;  /* IE 10 syntax */
   flex-grow: 1;
   margin-right: 0;
}

Further info:
- http://css-tricks.com/snippets/css/a-guide-to-flexbox/
- http://css-tricks.com/old-flexbox-and-new-flexbox/

Browser support: http://caniuse.com/#feat=flexbox
(note that IE10 is supported but it implements an older syntax)

more