Displayed here is an example that showcases floating divs on the left and right with varying container widths.
When the container is large, the divs floating to the left cling to the left edge, while the div floating to the right clings to the right edge. Is there a method to ensure that these divs stay together (horizontally centered within the container) when it's large? Note that fixing the width of the container or any div is not an option.
My preference would be to find a solution without relying on javascript.
.container {
display: inline-block;
border: 1px solid black;
}
.inner1 {
float: left;
background-color: #aff;
}
.inner2 {
float: right;
background-color: #ffa;
}
.inner3 {
float: left;
background-color: #faf;
}First example with wide container<br />
<div class="container" style="width:400px">
<div class="inner1"><---------- First</div>
<div class="inner2">Second
<br />--------
<br />------</div>
<div class="inner3">Third ----------</div>
</div>
<br />
Second example with small container<br />
<div class="container" style="width:100px">
<div class="inner1"><---------- First</div>
<div class="inner2">Second
<br />--------
<br />------</div>
<div class="inner3">Third ----------</div>
</div>
EDIT : I am utilizing floats in order to prevent the default arrangement of divs. Non-floating divs are typically ordered either from left-to-right or top-to-bottom, creating unused space at times. For instance, if div1 is wide but not tall, and div2 is narrow but tall, on a large screen, div2 will be positioned to the right of div1 leaving vacant space below div1 and to the left of div2. I intend to use this space for div3, but due to the ordering, div3 ends up below or to the right of div2.
To combat this issue, I opted for floating divs, which led to the problem of divs separating on larger screens as outlined initially.
If there is a way to solve this problem without using floats, that would be ideal.