CODEWITHSUNDEEP
htmlcss
jack
jack

Reputation: 151

Why the input and the button not taking the whole width of the div?

I have the following html code :

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
}
<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>

Here is a fiddle to view it live: https://jsfiddle.net/nner02rk/2

I want the search input and submit input to take the full width of .search-wrapper or be centered inside the search-wrapper div.

Upvotes: 1

Views: 323

Answers (3)

Ali Ahmed
Ali Ahmed

Reputation: 1

Add width attribute to the search-query and search classes. Here is an example:

.search-query{
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
padding-left: 3%;
width: 200px;
}

Upvotes: 0

Eaten by a Grue
Eaten by a Grue

Reputation: 22931

Lots of ways to accomplish this depending on how you want the element widths distributed. One way is to set the width of your button and use calc to make the input 100% less the specified button width:

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  width: calc(100% - 55px);
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
  width: 55px;
}
<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>

Another would be to use CSS table layout:

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
  display: table;
}

.search-wrapper>span {
  display: table-cell;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  width: 100%;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: 100%;
}
<form method="GET" class="my-form">
  <div class="search-wrapper">
    <span><input type="search" class="search-query" placeholder="Search"></span>
    <span><input type="submit" value="search" class="search"></span>
    <div class="results"></div>
  </div>
</form>

Upvotes: 1

Jimenemex
Jimenemex

Reputation: 3166

You can remove your position: absolute in .search and add float: left to both .search-query and .search.

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  float: left;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  float: left;
  /* position: absolute; */
}
<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>

Upvotes: 0

Related Questions