How set two divs on the sides of the page?

Question

I have a problem with setting elements in a div. How can I set to display the number of elements on the page on the left and the search on the right

Here is a part of the code:

<div class="header-size-section">
    <div class="lable-size-section">
        <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
    </div>
    <div class="header-search-section">
        <span class="table-search-list">Search: </span>
        <input type="text" class="search-table" />
    </div>
</div>

Here is the JSFiddle

just add `justify-content: space-between` to `.header-size-section` — jcal, Jan 18 '19 at 08:28
possible duplicate of [https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div](https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div) — Harshith Rai, Jan 18 '19 at 08:33

score 1 · Answer 1 · answered Jan 18 '19 at 08:27

You are using bootstrap. Use bootstrap class justify-content-between. This ensures that the elements within that block have equivalent space between them.

Now, as there are only two element, you get complete space in center.

You can also use justify-content-around.

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: flex;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

header-size-section>header-search-section {
  float: right;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-between">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>

This is an example with justify-content-around.

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: flex;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

header-size-section>header-search-section {
  float: right;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-around">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>

score 1 · Accepted Answer · answered Jan 18 '19 at 08:33

Notice the: .header-size-section(change display: flex to display: block) and .header-size-section>.header-search-section(you missed dots)

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

.header-size-section>.header-search-section {
  float: right;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-between">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>

This is not a good answer. There's no need to use floats anymore. Also, using display: table-cell and inline-table. Quite a lot of properties for such a simple task. — Josh Kelly, Jan 18 '19 at 09:08

score 0 · Answer 3 · answered Jan 18 '19 at 09:15

You can just do this and remove the rest of the css:

.header-size-section {
  display: flex;
  font-weight: 600;
}

.lable-size-section {
  margin-right: 25px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

How set two divs on the sides of the page?

3 Answers3