How to align different elements inside div horizontally?

Question

I have made 3 elements:

Title ie 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>

Answer 1

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>

Answer 2

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?

Question

2 answers

solution1
1 ACCPTED 2018-02-05 14:13:07

solution2
1 2018-02-05 14:21:30

How to align different elements inside div horizontally?

Question

2 answers

solution1 1 ACCPTED 2018-02-05 14:13:07

solution2 1 2018-02-05 14:21:30

solution1
1 ACCPTED 2018-02-05 14:13:07

solution2
1 2018-02-05 14:21:30