CODEWITHSUNDEEP
csshtml
Mohd Shahril
Mohd Shahril

Reputation: 2327

Left/Right float button inside div

How can I make button float only in div area?

Here is my example CSS and HTML.

.test {
  width: 60%;
  display: inline;
  overflow: auto;
  white-space: nowrap;
  margin: 0px auto;
}
<div class='test'>
  <div style='float: left;'>
    <button>test</button>
  </div>
  <div style='float: right;'>
    <button>test</button>
  </div>
</div>

I want it to be like this.

enter image description here

Upvotes: 22

Views: 149152

Answers (2)

Penny Liu
Penny Liu

Reputation: 17408

You can use justify-content: space-between in .test like so:

.test {
  display: flex;
  justify-content: space-between;
  width: 20rem;
  border: .1rem red solid;
}
<div class="test">
  <button>test</button>
  <button>test</button>
</div>

For those who want to use Bootstrap 4 can use justify-content-between:

div {
  width: 20rem;
  border: .1rem red solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-between">
  <button>test</button>
  <button>test</button>
</div>

Upvotes: 18

Ahmed Alaa El-Din
Ahmed Alaa El-Din

Reputation: 1833

Change display:inline to display:inline-block

.test {
  width:200px;
  display:inline-block;
  overflow: auto;
  white-space: nowrap;
  margin:0px auto;
  border:1px red solid;
}

Upvotes: 29

Related Questions