How to force a block container to take always all the available width?

Question

Here is the HTML code I'm currently practising on. The CSS is not complete since I don't know how to do what I want to :

.container {
  margin: auto;
  width: 700px;
  border: solid blue 2px;
}
.container div {
  padding: 10px 0;
  vertical-align: top;
}
#orange {
  background-color: coral;
}
#blue {
  background-color: lightblue;
}
.container > div .content {
  border: dotted black 1px;
  height: 100px;
  width: 250px;
  margin: auto;
  display: block;
  text-align: center;
}

<div class="container">
  <div id="orange">
    <div class="content">content
      <br />width: 250px</div>
  </div>
  <div id="blue">
    <div class="content">content
      <br />width: 250px</div>
  </div>
</div>

When the container is large enough, the orange and blue blocks should stand side by side, like this :

If I reduce the width of the container, the horizontal margin inside the orange and blue blocks will shrink until their border meet the content's border :

Here is what I want to obtain when I reduce a bit more the container width :

Does anyone know how to do this ? If possible, without JS. And the container does not depend on the screen size, so I can't use media queries based on the device width. And, of course, the solution must be compatible with as many web browsers as possible (including the latest versions of IE).

Edit: I've considered using flexbox but I was hoping I could find a solution without. By the way, I would be interested by a way to write, in the CSS code, specific rules which apply only on IE9 and below.

Edit2: It seems it is not possible to do what I want with the following constraints :

• no JS
• no condition on the screen size, but on the container size instead

So I guess I will have to drop at least one of these...

Answer 1

Solution using flexbox.

In case you wish to have styles specific to IE9 and below, there are 2 options:

1. Have seperate stylesheet(.css file) specific to IE 9 and below, reference it in HTML - Target IE9 Only via CSS

2. Edit CSS in this way - https://css-tricks.com/snippets/css/browser-specific-hacks

.container {
  display: flex;
  background-color: green;
  justify-content: space-around;
  padding: 10px;
}
#orange {
  background-color: coral;
  height: 100px;
  min-width: 250px;
  text-align: center;
  margin: 5px;
}
#blue {
  background-color: lightblue;
  height: 100px;
  min-width: 250px;
  text-align: center;
  margin: 5px;
}
@media (max-width: 500px) {
  .container {
    flex-flow: row wrap;
  }
}

<div class="container">
  <div id="orange">
    <div class="content">
      content
      <br/>width: 250px
    </div>
  </div>
  <div id="blue">
    <div class="content">
      content
      <br/>width: 250px
    </div>
  </div>
</div>

Answer 2

Just add inline-block to the two boxes that needs to be side by side, and the block element will behave as you like (take always all the available width), because that's the default behaviour of block elements.

.container { 
  margin: auto; 
  font-size: 0;
  width: 700px;
}
.container div { 
  padding: 10px 0;
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
}
#orange { background-color: coral; }
#blue { background-color: lightblue; }

.container > div .content {
  border: dotted black 1px;
  height: 100px;       
  width: 250px;
  margin: auto;
  display: block;
  text-align: center;
}

<div class="container">
  <div id="orange">
    <div class="content">content<br />width: 250px</div>
  </div>
  <div id="blue">
    <div class="content">content<br />width: 250px</div>
  </div>
</div>

While inline-block runs over the text flow with the blocks behaviours, you need to avoid the whitespaces between the boxes. That's why I set font-size:0 in the container, and reset font-size: 1rem again in the inner boxes to achieve that.