CODEWITHSUNDEEP
htmlcss
Kevin
Kevin

Reputation: 928

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>

Upvotes: 1

Views: 82

Answers (5)

Leo
Leo

Reputation: 5235

Please do have a look at this Fiddle.

.subscribe button {
  height: 46px;
  width: 53px;
  background-color: black;
  color: white;
  padding-left: 10px 10px 10px 10px;
  float: right;
  position: absolute;                \\this is changed to absolute
  border: 2px solid black;
}

Upvotes: 1

Minal Chauhan
Minal Chauhan

Reputation: 6158

Try this:

<div class="search">
  <form>
  <input type="text" placeholder="serach here">
  <input class="submit" value="Seach">
  </form>
</div>

Css:

.search{
  position:relative;
  padding:0px 100px 10px 10px;
}
.search input[type="text"]{
  border:2px solid black;
  border-radius:3px;
  width:100%;
  height:30px;
  line-height:30px;
  display:block; 

}
.search input[type="text"]:focus{
      -webkit-appearance: none;
       appearance: none;
       outline:none;
}
.search .submit{
  position:absolute;
  width:100px;
  height:30px;
  text-align:center;
  right:0;
  border:2px solid black;
  top:0;
  cursor: pointer;
}
.search .submit:hover{
  background:black;color:#fff;
}

Here is jsfiddle link : https://jsfiddle.net/jmc548vc/1/

Upvotes: 1

Sagar Kodte
Sagar Kodte

Reputation: 3815

added display:inline-block to .textboxwhite-left and adjusted height and width of button according to input.

.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: 46px;
  width: 58px;
  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;
  display : inline-block;
}

#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>

Upvotes: 1

Pushpendra
Pushpendra

Reputation: 1712

Does this works for you?

.subscribe{ display:inline-block;}

Upvotes: 1

Ankur Bhadania
Ankur Bhadania

Reputation: 4148

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>

Upvotes: 1

Related Questions