How to Align 3 Divs Side by Side

center three divs side by side

Try it without float and with text-align:center; on the #wrapper. Since your blocks are display:inline-block;, they'll center the same way text does.

Note that nto make it responsive, I swapped all your widths to % instead of px and removed some extra margin spacing. I've also added vertical-align:top; so the divs aline along the top.

#wrapper{
    text-align:center;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.aboutleft,
.aboutright{
    display: inline-block;
    vertical-align:top;
    width: 48%;
}
.vline{
    background: rgb(186,177,152);
    display: inline-block;
    vertical-align:top;
    min-height: 250px;
    margin: 0;
    width: 1px;
}

http://jsfiddle.net/daCrosby/Ce3Uz/2/

How to align 3 divs (left/center/right) inside another div?

With that CSS, put your divs like so (floats first):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.

How can I align 3 divs side by side?

All the elements in one line

Wrap the div elements in a wrapper:

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

Then set the width of the wrapper, and float all three divs:

#wrapper {
  width:700px;
  clear:both;
}
#first {
  background-color:red;
  width:200px;
  float:left;
}
#second {
  background-color:blue;
  width:300px;
  float:left;
}
#third {
  background-color:#bada55;
  width:200px;
  float:left;
}

Also, use IDs and/or classes, and keep the CSS separate from the HTML. This makes the code easier to read and maintain.

The fiddle.

All elements in one line, same height

To accomplish the "same height" part, you can use display:table, display:table-row, and display:table-cell to get matching heights. It uses an extra div, so the HTML looks like:

<div id="wrapper">
  <div id="row">
    <div id="first">first</div>
    <div id="second">second<br><br></div>
    <div id="third">third</div>
  </div>
</div>

The floats can then be removed, so the CSS looks like:

#wrapper {
  display:table;
  width:700px;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:200px;
}
#second {
  display:table-cell;
  background-color:blue;
  width:300px;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:200px;
}

The fiddle.

The Flexbox Way

If you're only supporting newer browsers (IE 10 and up), Flexbox is another good choice. Make sure to prefix for better support. More on the prefixes can be found here.

The HTML

<div class="container">
  <div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
  <div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>

The CSS

.container {
  display:flex;
  justify-content:center;
}
.container > div {
  margin:10px;
  background-color:#bada55;
}
.first, .third {
  width:200px;
}
.second {
  width:300px;
}

The Codepen.

The Grid Way

You can accomplish this with grid now, too, though browser support might be an issue if you're supporting older browsers. It's the same HTML as with the flexbox example, with just different CSS:

The CSS

.container {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 10px;
  width:700px;
}
.container > div {
  background-color:#bada55;
}
.first, .third {
  width:200px;
}
.second {
  width:300px;
}

The codepen.

How to make 3 divs side by side

try this one. position: absolute;

.container {  border: 1px solid;  position: relative;  overflow: hidden;  }.container div {  height: 50px;  width: 50px;  background: red;  display: inline-block;  }#div1 { float: left;}#div3 { float: right;}#div2 {  position: absolute;  left: 0;  right: 0;  margin: auto;}

<div class="container">
  <div id="div1"></div>  <div id="div2">he</div>
  <div id="div3"></div></div>

Aligning 3 divs side by side in a navigation bar

I see that you're using display: table to achieve this effect. I highly recommend reading up more first before continuing with your work or project. Some layout concepts you have to know are grid and flex. In your case, we can use the flexbox concept to solve your problem.

flex basically is a method that can distribute space between items more easily. In your case, you can get what you're trying to achieve by using flex-grow and flex-basis. flex-basis defines how, initially, long/tall an item inside a flex container should be. flex-grow defines how an item inside a flex container can expand (grow) in width/height depending on the remaining space of the container.

In your case, we can simply set the flex container's width (your wrapping div) to 100%. To distribute space evenly between the items, we can set all the items' initial widths to 0. Then, distribute the remaining space of the container (which is still 100%) evenly using flex-grow to 1 for each flexbox item. However, this will make all the items similar in width. To make the center div wider, you can set the flex-grow to 2. This will make it so that the left div, center div, and right div have 25%, 50%, and 25% of the container's remaining space in width respectively. I really recommend reading further about flex to understand what I mean. After reading about flex in the above link, try visiting this and this to learn more about flex-basis and flex-grow.

Here's a working solution using flex. Again, I recommend reading more about flex so that you can use flex better.

* {  box-sizing: border-box;  margin: 0;  padding: 0;  font-family: Helvetica;}
body,html {  width: 100%;  height: 100%;}
#wrapper {  display: flex;  width: 100%;}
#wrapper * {  padding: 30px;  text-align: center;  color: white;}
.left-align,.right-align {  flex-basis: 0;  flex-grow: 1;}
.center-align {  flex-basis: 0;  flex-grow: 2;}
.left-align {  background: #121212;}
.center-align {  background: #232323;}
.right-align {  background: #454545;}

<div id="wrapper">  <div class="left-align">Some content</div>  <div class="center-align">Some content</div>  <div class="right-align">Some content</div></div>

Three divs side by side with spacing in between

You might be better using a flexbox to achieve what you need. Create a container for the three .box divs, and style it with the following:

display:flex;
justify-content:space-between;

Keep in mind that the width of your .box divs will need to be lowered to achieve the space you want and that you would not require the float:left; in the css.

For more info on flexboxes, click here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Aligning three divs side by side and along the bottom of the longest

Use display values as table, table-row and table-cell with which you can create the same heights as well as the vertical align to the bottom.

Check the fiddle:
https://jsfiddle.net/oyzorx4r/

<div class="table">
  <div class="row">
    <div class="cell">
      info in it at the bottom
    </div>
    <div class="cell">
      some more info<br /><Br /> with extra breaks
    </div>
    <div class="cell">
      <p>
        lots of info<br /><br /><Br /><Br /><br />and some more
      </p>
    </div>
  </div>
</div>

.table {
  display:table;
  width:100%;
  overflow:hidden;
}
.row {
  display:table-row;
}
.cell {
  display:table-cell;
  width:33%;
  background:red;
  vertical-align:bottom;
}

---

Related Topics