Stack divs vertically with different child alignment
http://s4.postimg.org/mbrpxn2d9/Untitled.png
Edit: don't duplicate. Another question does not provide information on divs auto-adjusting to words inside.
I have 4 divs. I have 3 divs inside another div and I am trying to float one to the left, one to the center and one to the right. I am also trying to make the width and height of the divs inside to automatically adjust to the width and height of the words on the inside of the div. I also want the divs inside to be stacked on top of each other, not on the same line. So far I've got the left div to float to the left and the right div to float to the right, but I just can't get the middle div centered and not adjust to the width and height of the word inside from that. 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>
source to share
Depending on the result of the image, I think a flexbox solution would be a good way to go.
-
Let the container have a flexible layout with column packing.
-
Align each item based on the position in the container, that is
flex-start
,center
andflex-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>
source to share
If you change your HTML a bit, this is an option, you can add span elements in your divs that are given to you 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>
source to share
Is this what you mean? I have 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>
source to share