For the past 2 days, I've been struggling with this problem. I've experimented with "display: flex" and various combinations, but none have given me the desired outcome.
I require CSS code to achieve this layout (refer to the image).
I have two potential variations of HTML:
<div class="container">
<div class="item">Left Button</div>
<div class="item">Right button</div>
</div>
or
<div class="container">
<div class="item">Left Button</div>
<div class="item">Center button</div>
<div class="item">Right button</div>
</div>
What should be included in the CSS to create this layout: https://i.sstatic.net/M2zTw.png
You can see both examples in the image provided. The first one corresponds to the first HTML structure, while the second example is for the second HTML version.
Essentially, I am looking for:
All items must have equal width at all times.
Each item should occupy approximately 33% of the container's width consistently.
If there are 3 items, the middle one should have a margin of 10px on both sides. However, it is crucial to remember the first point - maintaining uniform width among all items. This means that using 20px from the width as margin isn't feasible, as it would result in a narrower middle item.
One of the unsuccessful attempts involved:
.container {
display: flex;
}
.items {
flex: 1 0 0;
}
.items:nth-child(2) {
margin: 0 10px;
}
This approach is incorrect.
I also tried the following, which again did not yield the desired results:
.container {
display: block;
}
.items {
width: 33%;
}
.items:nth-child(2) {
margin: 0 10px;
}