One div: Justify somethings to the left, some right and some middle

Question

I have the following HTML:

<div>
    <button>b1</button> 
    <button>b1</button> 
    <button>b1</button> 
    <span>Heading</span>
    <span>Status</span>
</div>

When the div is this wide I would like this to be displayed like this:

|-------------------------------------------|
| b1 b2 b3         Heading           Status |
|-------------------------------------------|

When the div is this wide I would like things to be displayed like this:

|----------------------------------------------------------------------------------|
| b1 b2 b3                        Heading                                   Status |
|----------------------------------------------------------------------------------|

When the div is too narrow to accommodate everything, something reasonable should happen.

|--------------------------|
|          Heading         | 
| b1 b2 b3          Status | 
|--------------------------|

Summary of requirements:

• 3 buttons are aligned to the left
• Heading is centered
• Status is aligned to the left
• When the div is too narrow to accommodate all three things, the heading should appear on a separate line before the other things (other reasonable behaviour would also be fine).

What is the best way to implement this kind of layout?

Answer 1

Im not sure if this is what you wanted, but I made a jsfiddle with several changes to the html http://jsfiddle.net/dj0p1tqx/

All I had to do is put the them inside containers, with equal width:33.333%

Answer 2

The css code

<style type="text/css">
div {
    margin: 0 auto;
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
}

button {
    float: left;
}

.position-right {
    float: right;
}   
</style>

And the html:

<div>
    <button class="position-left">b1</button> 
    <button class="position-left">b1</button> 
    <button class="position-left">b1</button> 
    <span class="position-left">Heading</span>
    <span class="position-right">Status</span>
</div>

Answer 3

You can do that: http://jsfiddle.net/csdtesting/74ShU/40/

.mainDIV {
  position: relative;
  width: 100%;
  min-width: 315px;
}
.leftDIV {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 130px;
}
.middleDIV {
  height: 50px;
  width: 100px;
  margin: 0px auto;
}
.rightDIV {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 50px;
  width: 100px;
}

<div class="mainDIV">
  <div class="leftDIV">
    <button>b1</button>
    <button>b1</button>
    <button>b1</button>
  </div>
  <div class="middleDIV"> <span>Heading</span>
  </div>
  <div class="rightDIV"> <span>Status</span>
  </div>
</div>