html - Make items to stretch inside the container with same gap -

i have 4 items same width. need them stretched inside fluid container. whenever resize window, gap between each item should adjust in such way items still stretching inside container. here image of want.

here code, have tried:

.parent {     margin-top: 40px;     background-color: beige; } .parent::after {     content:"";     clear: both;     display: block; } .child {     width: 20px;     height: 20px;     background-color: tomato;     margin-left: 20%;     float: left; } 

fiddle

for limited known items:

suppose, know number of items present in container. lets items 4. lets wrap items in separate sections each , give sections float: left , width: 25%. here giving width: 25% because there 4 sections need cover container i.e 100/4 = 25%. result in similar view shown below in image:

as can see in above image, items still not aligned each other. can see gap between last item , container. if ignore gap, can see items equally aligned each other.

so should able remove width of section holding last item. can done using :last-child selection. since, last item holder hidden, need stretch other child holders. hence, need divide 100% 3 instead of 4.

.child-holder{     width: 33.3%;   /* instead of 25% */ }  .child-holder:last-child {     width: 0px; } 

it stretches items hides last item. can see in below image:

we can solve giving negative margin-left each item value equal items. applying so, hides first item. so, give margin-left container equal item's width (positive value).

.parent {     margin-left: 20px;  /* value equal item's width */ } .child {     width: 20px;     height: 20px;     background-color: black;     margin-left: -20px;  /* negative margin equal width */ } 

hence, give solution want:

working fiddle

for unknown number of items:

for unknown number of items, replace float: left item holding sections display: table-cell , stretch sections, apply display: table; width: 100%; parent container. , since must apply margin-left value equal item's width, have parent wrapper, apply margin-left instead. (because, if apply margin-left , width: 100% same element, element overflow)

though giving width: 0px last item holder section, still occupying space.

this can solved applying table-layout: fixed parent container. give solution:

working fiddle

this solution work number of items, added dynamically or static. automatically adjusted.

for unknown number of items unequal widths:

for unequal/unknown width of items, should go javascript. here small code wrote use in 1 of projects:

function setalign(parentclass, childcommonclass) {     var childdivs = document.getelementsbyclassname(childcommonclass);     var childdivstotalwidth = 0;     var childdivslength = childdivs.length;     var parentelement = document.getelementsbyclassname(parentclass)[0];     var parentelementwidth = parentelement.offsetwidth;     (var = 0; < childdivslength; i++) {         childdivstotalwidth += childdivs[i].offsetwidth;     }     var remainingwidth = parentelementwidth - childdivstotalwidth;      var gap = remainingwidth / (childdivslength - 1);     var leftwidth = 0;     (var j = 0; j < childdivslength; j++) {         if (j > 0) {             leftwidth += gap + childdivs[j - 1].offsetwidth;         }         childdivs[j].style.left = leftwidth + "px";     } }  window.onload = setalign('row', 'box'); window.onresize = function () {     setalign('row', 'box'); } 

working fiddle