CODEWITHSUNDEEP
htmlcssflexbox
frosty
frosty

Reputation: 2649

Stack divs vertically with different child alignment

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>

Upvotes: 3

Views: 71

Answers (4)

j08691
j08691

Reputation: 207861

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>

Upvotes: 2

m4n0
m4n0

Reputation: 32255

Depending on the output of the image, I think flexbox solution would be a good way to go.

  1. Let the container have a flexible layout with column wrapping.

  2. 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>

Upvotes: 3

Neo
Neo

Reputation: 1469

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>

Upvotes: 1

Bhavesh Gupta
Bhavesh Gupta

Reputation: 176

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>

Upvotes: 0

Related Questions