CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin AJ
Martin AJ

Reputation: 6697

How can I set the rest of width to an input?

Here is my code:

input, div{
  border:1px solid;
  margin: 20px 30px 0px 30px;
}
<input />
<div>
something
</div>

All I want to do is making the input the same width as the div.

Noted that neither display: block; nor width: 100%; won't work as expected.

Upvotes: 1

Views: 41

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use display: flex on parent element or in this case body and flexbox will make both items same width by default if you use flex-direction: column

body {
  display: flex;
  flex-direction: column;
}
input, div{
  border:1px solid;
  margin: 20px 30px 0px 30px;
}
<input type="text">
<div>
something
</div>

Or you can use calc and hardcode width - margin to input element.

input, div{
  border:1px solid;
  margin: 20px 30px 0px 30px;
}

input {
  display: block;
  width: calc(100% - 60px);
  padding-left: 0;
  padding-right: 0;
}
<input type="text">
<div>
something
</div>

Or you can add a wrapper and set the margin property (or even padding) to it:

* {
  box-sizing: border-box;
}
div {
  border: 1px solid;
  margin: 20px 30px 0px 30px;
}

.input_wrapper {
  margin: 20px 30px 0px 30px;
}

input {
  border: 1px solid;
  width: 100%;
}
<div class="input_wrapper">
  <input type="text">
</div>
<div>
  something
</div>

Upvotes: 2

Mihir Bhende
Mihir Bhende

Reputation: 9045

Basically if you do it entirely 100% and add a border to it, it will go above 100%. What you can do is add border inset as below : 

<input />
<div>
something
</div>

input, div{
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 10px;
    border: 1px solid #000;
  margin: 20px 0px;
}

See here : https://jsfiddle.net/b5yguuaw/1/

Upvotes: 0

Pc hobbit
Pc hobbit

Reputation: 96

You could try object-fit: fill;

see this object-fit

Upvotes: 0

Related Questions