Stack divs vertically with different child alignment - html

Question

http://s4.postimg.org/mbrpxn2d9/Untitled.png
Edit: Not a duplicate. The other question doesn't contain information about divs being automatically adjusted to the words on the inside.
I have 4 divs. I have 3 divs inside another div, and I'm trying to float one to the left, one to the center, and one to the right. I'm also trying to make the width and height of the divs on the inside to be automatically adjusted to the width and height of the words on the inside of the divs. I also want the divs on the inside to stack up on top of each other, instead of being on the same line. So far, I got the left div to float to the left, and the right div to float to the right, but I just cannot get the middle div to be centered, nor get it to adjust to the width and height of the word inside of it. Please take a look at my code:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
border: 1px solid red;
float: left;
}
#innerMiddle {
border: 1px solid red;
margin: auto;
}
#innerRight {
border: 1px solid red;
float: right;
}
<div id='outer'>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'>Middle</div>
<div id='innerRight'>Right</div>
</div>

Answer 1

Depending on the output of the image, I think flexbox solution would be a good way to go.
Let the container have a flexible layout with column wrapping.
Align each item based on position in the container i.e. flex-start, center and flex-end
#outer {
display: flex;
display: -ms-flex;
flex-flow: column wrap; /* Wrap the items column wise */
justify-content: flex-start; /* Items to start from the top of the container */
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
align-self: flex-start; /* Equivalent to float: left of your code */
border: 1px solid red;
}
#innerMiddle {
align-self: center; /* Equivalent to margin: auto */
border: 1px solid red;
}
#innerRight {
align-self: flex-end; /* Equivalent to float: right */
border: 1px solid red;
}
<div id='outer'>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'>Middle</div>
<div id='innerRight'>Right</div>
</div>

Answer 2

If changing your HTML just a bit is an option, you can add span elements in your divs which will give you want, and it will work in all browsers:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
text-align:left;
}
#innerMiddle {
text-align:center;
}
#innerRight {
text-align:right;
}
div > div > 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>

Answer 3

This is what you mean?? I had Edited
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
border: 1px solid red;
/* width: 30%; */
float: left;
}
#innerMiddle {
border: 1px solid red;
float: left;
margin: 0 5px;
}
#innerRight {
border: 1px solid red;
float: right;
}
<div id='outer'>
<div id='innerLeft'>LeftLeftLeftLeft</div> <br>
<div id='innerMiddle'>MiddleMiddleMiddleMiddle</div> <br>
<div id='innerRight'>RightRightRightRight</div>
</div>

Answer 4

write your html tags like this hope it help!
<div id='outer'>
<div id='innerRight'>Right</div>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'></div>
</div>