Aligning text to the left, middle, right using span, text align, and inline-block, CSS, HTML -

i have 4 divs. have 3 divs inside of div, , i'm trying align them left, middle, , right while keeping them on same line. i've tried inline-block, it's not working reason. i'm not sure did wrong, please take @ code:

     #outer {      border: 1px solid black;      width: 500px;      height: 500px;  }  #innerleft {      text-align:left;      border: 1px solid black;      display: inline-block;      width: 100%;  }  #innermiddle {      text-align:center;      border: 1px solid black;      display: inline-block;      width: 100%;  }  #innerright {      text-align:right;      border: 1px solid black;      display: inline-block;      width: 100%;  }  span {      border: 1px solid red;  }

<div id='outer'>    <div id='innerleft'><span>left</span></div>    <div id='innermiddle'><span>middle</span></div>    <div id='innerright'><span>right</span></div>  </div>

to them on same line don't need spans suggested in last question, need change order of divs. float left , right elements respective sides.

#outer {    border: 1px solid black;    width: 500px;    height: 500px;    text-align: center;  }  #innerleft {    float: left;    border: 1px solid black;  }  #innermiddle {    border: 1px solid black;    display: inline-block;  }  #innerright {    float: right;    border: 1px solid black;  }

<div id='outer'>    <div id='innerleft'>left</div>    <div id='innerright'>right</div>      <div id='innermiddle'>middle</div>  </div>