exteveWilielt
New Member
I would like to center divs using all the available space in a parent div.
Have a look at this jsfiddle. With this method, the divs will float at the center irrespective of what the parent's width is, creating so much whitespace at far ends of the row.
But I want to have 1st and last yellow boxes to stick to left and right edges respectively and center ones should float in the middle.
When I resize the parent div, child divs should adjust themselves automatically.
Is it possible?
Another Question, which is a continuation, can I remove the "row" divs from markup and still achieve the same result? HTML:\[code\]<div class="container"><div class="row"> <div>Row 1 1</div> <div>Row 1 2</div> <div>Row 1 3</div> <div>Row 1 4</div></div><div class="row"> <div>Row 2 1</div> <div>Row 2 2</div> <div>Row 2 3</div> <div>Row 2 4</div></div></div>\[/code\]CSS:\[code\]body{ margin: 0; padding: 0;}.container{ border: 1px solid #2aF1E2; overflow: hidden;}.row{ margin: 10px; border: 1px solid #2351E2; overflow: hidden; text-align: center;}.row div{ margin: 10px 0 10px 0; display: inline-block; width: 100px; border: 1px solid #eac300; padding: 5px; text-align: initial;}\[/code\]
Have a look at this jsfiddle. With this method, the divs will float at the center irrespective of what the parent's width is, creating so much whitespace at far ends of the row.
When I resize the parent div, child divs should adjust themselves automatically.
Is it possible?
Another Question, which is a continuation, can I remove the "row" divs from markup and still achieve the same result? HTML:\[code\]<div class="container"><div class="row"> <div>Row 1 1</div> <div>Row 1 2</div> <div>Row 1 3</div> <div>Row 1 4</div></div><div class="row"> <div>Row 2 1</div> <div>Row 2 2</div> <div>Row 2 3</div> <div>Row 2 4</div></div></div>\[/code\]CSS:\[code\]body{ margin: 0; padding: 0;}.container{ border: 1px solid #2aF1E2; overflow: hidden;}.row{ margin: 10px; border: 1px solid #2351E2; overflow: hidden; text-align: center;}.row div{ margin: 10px 0 10px 0; display: inline-block; width: 100px; border: 1px solid #eac300; padding: 5px; text-align: initial;}\[/code\]