Have 3 sections(divs) float left, center, and right

Question

I'm trying to get 3 separate elements float left center and right. The main container wrapping the 3 is using the following:

.container {
    display: inline-block;
    margin: 0 auto;
}

The 3 elements are using the following:

.left {
    float: left
}

.center {
    display: inline-block;
    margin: 0 auto;
}

.right {
     float: right;
}

I was able to successfully distribute these left, center, and right but the height of each are different and now they aren't vertically aligned. I've tried using the "vertical-align" property but it doesn't seem to work. What should I do?

you want these to have same width but different height, and be vertically aligned? — Adam, May 13 '18 at 04:02
“What should I do” is a relative question. It all depends on your project. I personally don’t think you can go wrong with `flex` to let this handle it for you. But based on the title of this question and your last paragraph, you already have the answer. The height is mostly likely different for each one because the content inside the elements are of different length/size collectively, which is normal behavior. If you want them to all be the same height simply set the height property to your needs. Or max-height/min-height — soulshined, May 13 '18 at 04:14

score 0 · Answer 1 · answered May 13 '18 at 04:17

Use CSS Flexbox.

.flexContainer { display:flex; height:250px; }
.flexContainer div { border:1px solid black; flex:1; }

<div class="flexContainer">
  <div>Box 1</div>
  <div>
       Box 2 Box 2Box 2Box 2Box 2Box 2Box 2Box<br>
       2Box 2Box 2Box 2Box 2Box 2Box 2Box 2Box 2
       Box 2 Box 2Box 2Box 2Box 2Box 2Box 2Box<br>
       2Box 2Box 2Box 2Box 2Box 2Box 2Box 2Box 2
       Box 2 Box 2Box 2Box 2Box 2Box 2Box 2Box<br>
       2Box 2Box 2Box 2Box 2Box 2Box 2Box 2Box 2       
  </div>
  <div>Box 3</div>  
</div>

Have 3 sections(divs) float left, center, and right

1 Answers1