How to align different elements inside div horizontally?

Question

I have made 3 elements:

Title i.e All contacts
Dropdown Button
Circular button

I want to arrange all 3 of horizontally but they are getting placed one below the other (see screenshot).

Above elements must be arranged horizontally similar to below screenshot:

.header .title {
  text-align: center;
}

.header .dropdown {
  padding-left: 20px;
}

.header .button {
  background-color: red;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  border-radius: 50%;
}

<body>
  <div class="header">
    <div class="title">
      <h2>All Contacts</h2>
    </div>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
         <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">All Contacts</a></li>
        <li><a href="#">Family</a></li>
        <li><a href="#">Work</a></li>
      </ul>
    </div>
    <div id="addbutton">
      <button class="button">+</button>
    </div>

  </div>
</body>

The CSS you provided doesn't seem to correlate with the screenshot provided. Why not create a JS fiddle of your results instead of a screenshot. — Dean Meehan, Feb 05 '18 at 14:09
Possible duplicate of [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) — Temani Afif, Feb 05 '18 at 14:10
https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image — Temani Afif, Feb 05 '18 at 14:10
https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — Temani Afif, Feb 05 '18 at 14:11
https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css — Temani Afif, Feb 05 '18 at 14:11
and many more question where you can easily find what you are looking for — Temani Afif, Feb 05 '18 at 14:12
https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div — Temani Afif, Feb 05 '18 at 14:13
you need to do more search and you will get your answer :) a simple search on SO and you got it — Temani Afif, Feb 05 '18 at 14:13
@TemaniAfif I question which is added as duplicate just answers how to align it vertically - > `How do I vertically align text in a div? ` but I want to add elements in horizontal manner. — stone rock, Feb 05 '18 at 14:49
@TemaniAfif It is not possible duplicate I want to display elements horizontally and not vertically. — stone rock, Feb 05 '18 at 14:49
and what about the other links :) i shared 5 links on which you will find what you need ;) — Temani Afif, Feb 05 '18 at 14:49
@TemaniAfif I checked all and all of them are vertically alignment but here I am trying to do horizontal — stone rock, Feb 05 '18 at 14:51
well .. take a look at the last one, it deals exactly about what you need which is making 3 divs next to each other. Then why i shared the other links because the next step after making your div next to each other is to align them vertically like you show in your screenshot. And i know that you will face this issue. So in all these links [if you check them well and not only pick the first answer] you will find different portion of code that will allow you to create your layout --> which means you need to do more research before posting a question — Temani Afif, Feb 05 '18 at 14:54
@TemaniAfif I think you did not got my question :) I have made 3 `div` but I am not trying to align them vertically but horizontally see 2nd screenshot in question that is what I am trying to achieve (horizontal) — stone rock, Feb 05 '18 at 14:56
i think you didn't get me and you didn't check ALL the link i shared :) again here is a link dealing with the same thing : https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div — Temani Afif, Feb 05 '18 at 14:58
and i understand your tried to achieve horizontally BUT they need to be aligned in a vertical way ... and you will find this in some of my links — Temani Afif, Feb 05 '18 at 14:59
@TemaniAfif Thanks man above link which I upvoted is exactly what I was trying to do thanks a ton. :) — stone rock, Feb 05 '18 at 15:03

Dhaval Jardosh · Accepted Answer · 2018-02-05T14:37:46.370

Below if an example of flexible item which you mentioned in the comment.

.button is not immediate to parent having display:flex, hence it won't be flexible. As you can check in the snippet.

If you remove the div with class button, the <button> will stretch itself, and will be considered flexible.

.header {
  display: flex;
  flex-direction: row;
  background-color: skyblue;
}

.header .title {
  text-align: center;
  flex: 1;
}

.header .dropdown {
  padding-left: 20px;
  flex: 1;
  margin-top: 20px;
}

.header .button {
  flex: 1;
  background-color: red;
  border: none;
  color: white;
  padding: 20px;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  border-radius: 50%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<div class="header">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
              <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">All Contacts</a></li>
      <li><a href="#">Family</a></li>
      <li><a href="#">Work</a></li>
    </ul>
  </div>

  <div class="title">
    <h2>All Contacts</h2>
  </div>

  <div id="addbutton">
    <button class="button pull-right">+</button>
  </div>

</div>

While here you will see that, property is assigned to id addbutton, and it will work fine

.header {
  display: flex;
  flex-direction: row;
  background-color: skyblue;
}

.header .title {
  text-align: center;
  flex: 1;
}

.header .dropdown {
  padding-left: 20px;
  flex: 1;
  margin-top: 20px;
}

.header #addbutton {
  flex: 1;
}

.header .button {
  flex: 1;
  background-color: red;
  border: none;
  color: white;
  padding: 20px;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  border-radius: 50%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<div class="header">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
              <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">All Contacts</a></li>
      <li><a href="#">Family</a></li>
      <li><a href="#">Work</a></li>
    </ul>
  </div>

  <div class="title">
    <h2>All Contacts</h2>
  </div>

  <div id="addbutton">
    <button class="button pull-right">+</button>
  </div>

</div>

I could not understand how flex works ? I went through this https://www.w3schools.com/cssref/css3_pr_flex.asp but it also says this -> `Note: If the element is not a flexible item, the flex property has no effect.` — stone rock, Feb 05 '18 at 14:17
@stonerock- check the edited answer, will give you more information — Dhaval Jardosh, Feb 05 '18 at 14:51
yes I will remove `div id="addbutton"` tag so that it will become flexible above code 1st one is exact thing I am trying to do thank but one doubt ? Are `div` flexible — stone rock, Feb 05 '18 at 14:54
yes, div are flexible all the time. If you remove `div id="addbutton"`, it's not a good idea. It will stretch your button all the way. — Dhaval Jardosh, Feb 05 '18 at 14:55
I could not get this line -> `.button is not immediate to parent having display:flex, hence it won't be flexible` but button is inside div then why not flexible — stone rock, Feb 05 '18 at 14:58
[**FLEXBOX**](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), check this article and make sure you get the concept of `parent` and `children`. By the time [**check this**](https://codepen.io/dhavaljardosh/pen/pabbzj) — Dhaval Jardosh, Feb 05 '18 at 15:07

score 1 · Answer 2 · answered Feb 05 '18 at 14:21

I'd use flex, justify content, and re-arrange your html order if you want All Contacts to be in the center.

.header {
  display: flex;
  justify-content: space-between;
  background-color: rgb(73, 76, 178);
}

.header .title {
  text-align: center;
}

.header .dropdown {
  padding-left: 20px;
}

.header .button {
  background-color: red;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  border-radius: 50%;
}

<body>
  <div class="header">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
         <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">All Contacts</a></li>
        <li><a href="#">Family</a></li>
        <li><a href="#">Work</a></li>
      </ul>
    </div>
    
    <div class="title">
      <h2>All Contacts</h2>
    </div>
    
    <div id="addbutton">
      <button class="button">+</button>
    </div>

  </div>
</body>

How to align different elements inside div horizontally?

2 Answers2