Kevin Aartsen Kevin Aartsen - 6 months ago 8
HTML Question

Button not sticking next to field

I'm trying to position my button so it sticks next to the input field.

Like here:

enter image description here

In the example i just showed there, the button had a position relative and a float right. I did the exact same thing but it didn't work.

Here is my fiddlesticks:



.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
}

.subscribe button {
height: 40px;
width: 53px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: relative;
border: 2px solid black;
}

.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
}

#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}

<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>




Answer

Please check this code.

.subscribe input {
  font: 15px/25px Georgia, Times, 'Times New Roman', serif;
  border: 2px solid black;
  height: 40px;
  width: 340px;
  font-style: italic;
  padding-left: 10px;
   float: left;
}

.subscribe button {
  height: 46px;
  width: 80px;
  background-color: black;
  color: white;
  padding-left: 10px 10px 10px 10px;
  float: left;
  position: relative;
  border: 2px solid black;
}

.textboxwhite-left {
  padding: 40px 20px 0px 20px;
  color: black;
  text-align: left !important;
}

#container {
  display: block;
  height: 900px;
  width: 100%;
  position: relative;
  top: 50px;
  margin: 0;
  color: white;
  text-align: center;
}
<div id="container">

  <div class="textboxwhite-left">

    <form class="subscribe" action="" method="post">


      <input type="text" name="subscribefield" required="true" placeholder="Awe" />
      <button type="submit">Search</button>


    </form>
  </div>
</div>