Floating divs left/right without separating them on large window - html

Question

The following example shows floating div on the left and right with two different container widths.
For large container (or large window), the divs floating left stick to the left border, and the div floating right stick to the right.
Is there a way to force the divs to stick together (horizontally centered in the container) when the container is large? Note that fixing the width of the container or that of any div is not an option.
Ideally, I would like to avoid 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 :
The reason why I'm using floats is to prevent the default ordering of divs. When non-floating, they are ordered either left-to-right or top-to-bottom, or both. This ordering prevents, sometime, useful space to be filled. For example, imagine div1 wide but not tall, and div2 thin and tall. If the screen is large enough, div2 will be to the right of div1. There will be a lot of space left below div1 and to the left of div2. I want to put div3 in that space. But because of the ordering, div3 will go to the right or below div2.
To resolve this problem, I used floating divs, but it created the other problem I stated initially: floating left/right makes divs separate on large screens.
If the problem can be solved without floats, it would be best.

Answer 1

i cant comment yet, since im pretty new.
so i will just talk
if i understand the question right, You
might be looking for the
vertical-align: middle;
I hope thats what you where looking for.

Answer 2

Do you mean something like this? Just remove float from .inner3.
.container {
display: inline-block;
border: 1px solid black;
}
.inner1 {
float: left;
background-color: #aff;
}
.inner2 {
float: right;
background-color: #ffa;
}
.inner3 {
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>

Answer 3

You can use CSS3 #media query. Just float the divs on screen with 400px width and above.
.container {
border: 1px solid black;
}
.inner1 {
float: left;
background-color: #aff;
}
.inner2 {
float: right;
background-color: #ffa;
}
.inner3 {
float: left;
background-color: #faf;
}
#media (min-width: 400px) {
.container {
margin: 0 auto;
}
.inner1 {
float: left;
}
.inner2 {
float: left;
}
.inner3 {
float: left;
}
}
The container will centered on the screen width >= 400px. And the inner divs will float to the left. By default, the inner1, inner2, and inner3 will be floated to the left, right, and left respectively.
Example on JSFiddle

Answer 4

I think, in this case remove display: inline-block; from .container and add overflow: hidden; here and into .inner3 :
.container {
border: 1px solid black;
overflow: hidden;
}
.inner1 {
float: left;
background-color: #aff;
}
.inner2 {
float: right;
background-color: #ffa;
}
.inner3 {
overflow: hidden;
background-color: #faf;
float: left;
}
EDIT jsfiddle:
jsfiddle-link