0

I'm having this kind of problem because I already tried this code:

.form {
  position: relative;
  width: 80%;
  background: #CCC;
}

.btn-one,
.btn-two {
  position: relative;
  height: 35px;
  width: 50%;
  border: 0;
  border-radius: 4px;
  color: white;
  background: Steelblue;
  display: inline-block;
}
<div class="form">
  <button class="btn-one">Button 1</button>
  <button class="btn-two">Button 2</button>
</div>

But the result is that the .btn-two ends up being on the new line or at the bottom of .btn-one. How can I make this full width without spaces while they're inlined? I hope someone will suggest an answer without the use of Bootstrap. Only in pure CSS.

Temani Afif
  • 180,975
  • 14
  • 166
  • 216
Domino Wallace
  • 19
  • 2

3 Answers3

4
.form {
    position: relative;
    width: 80%;
    background: #CCC;
    display: flex;
}
.btn-one, .btn-two {
    position: relative;
    height: 35px; width: 50%;
    border: 0; border-radius: 4px;
    color: white;
    background: Steelblue;
    display: inline-block;
}
<div class="form">
    <button class="btn-one">Button 1</button>
    <button class="btn-two">Button 2</button>
</div>
Riyal Savaj
  • 81
  • 1
  • 2
  • 3
1

Add float: right; to .btn-two:

.btn-two {
  float: right;
}

See working example below:

.form {
  position: relative;
  width: 80%;
  background: #CCC;
}

.btn-one, .btn-two {
  position: relative;
  height: 35px;
  width: 50%;
  border: 0;
  border-radius: 4px;
  color: white;
  background: Steelblue;
  /* display: inline-block; <-- No need for display */
}

.btn-two {
  float: right;
}
<div class="form">
  <button class="btn-one">Button 1</button>
  <button class="btn-two">Button 2</button>
</div>
Nick Parsons
  • 31,322
  • 6
  • 25
  • 44
  • 1
    Thank you! It worked. I thought using float will make the element absolute or the parent element which is the **form** will not make a space for the element. – Domino Wallace Nov 24 '18 at 07:45
  • @DominoWallace I don't agree a lot with this *float* solution as it sounds like a hack, all what you need is to use the code as its and remove the white space between the inline-block elemen (check the duplicate) – Temani Afif Nov 24 '18 at 08:48
  • Yes, for a more solid and complete solution please see the duplicate marked by @TemaniAfif – Nick Parsons Nov 24 '18 at 12:39
1

You Can Use display: flex;

HTML:

<div class="form">
    <button class="btn-one">Button 1</button>
    <button class="btn-two">Button 2</button>
</div>

CSS:

.form {
    position: relative;
    width: 80%;
    background: #CCC;
    display: flex;
}
.btn-one, .btn-two {
    position: relative;
    height: 35px; width: 50%;
    border: 0; border-radius: 4px;
    color: white;
    background: Steelblue;
}

Try This

.form {
    position: relative;
    width: 80%;
    background: #CCC;
    display: flex;
}
.btn-one, .btn-two {
    position: relative;
    height: 35px; width: 50%;
    border: 0; border-radius: 4px;
    color: white;
    background: Steelblue;
    display: inline-block;
}
<div class="form">
    <button class="btn-one">Button 1</button>
    <button class="btn-two">Button 2</button>
</div>
zubair khanzada
  • 797
  • 2
  • 7
  • 14