banu prakash banu prakash - 2 months ago 9
CSS Question

i want the input box and the search button combine? why the div is applicable of the margin i want that search from the top 40px below

i want to



.k1{
width:760px;
height:30px;

margin-top:40px;
}
.k2{
width:670px;
height:30px;
}
.k3{
width:75px;
height:30px;
}

<div class="k1">
<input type="text" class="k2">

</input>
<button value="search" class="k3" >
</button>
</div>





i want the input box and button combine and 40px from the top
why div is varied with the margin
the elements in the div is some where and div block is some where

the elemets inside the div vary with the div margin if div margin-top is 40 px the tags inside the is div is with margin-top with some margin from the top of the document

Answer

Something like this?:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #ffffcc;
  }
.k1 {
  margin-top: 40px; 
  height: 30px;  
  overflow: hidden;
}
.k2 {
  display: block; 
  float: left;
  width: calc(100% - 75px);
  height: 100%;
}
.k3 {
  display: block;
  float: left;
  width: 75px;
  height: 100%;
}
<div class="k1">
  <input type="text" class="k2">
  <button value="search" class="k3">Search</button>
</div>

Comments