I am faced with a challenge involving a container that is 100% width and contains up to 6 fluid items, each occupying 1/6 of the container's width (16.66%)
When there are fewer than 6 child divs, I want them to maintain their width proportion but be centered horizontally within the container.
Adding margins or padding on the container affects the item widths as it changes the total width they are based on.
While absolute positioning and JS could solve this issue, I prefer a CSS solution if possible.
Looking for advice on the best approach in this situation.
I have provided a visual example on jsfiddle: http://jsfiddle.net/9L4Qd/
Snippet from jsfiddle:
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
background-color: #000000;
}
#container div {
width: 16.66%;
float: left;
}
<div id="container">
<div style="background-color: #ffcc00;">
Option 1
</div>
<div style="background-color: #cccc00;">
Option 2
</div>
<div style="background-color: #ffcc00;">
Option 3
</div>
<div style="background-color: #cccc00;">
Option 4
</div>
<div style="background-color: #ffcc00;">
Option 5
</div>
</div>
Thank you,
Dave