Using Position:Absolute to Set an Inputs Width

using position:absolute to set an inputs width

Actually, what you're doing works fine. You just need to remember to set the parent element's position as well.

<div>
   <input type="text">
</div>

Then CSS it:

div {
    width: 400px;
    position: relative;
}
input {
    position: absolute;
    left: 5px;
    right: 5px;
}

This would result in the input box being 390px.

If you set the div to be flexible, then the input box would be too.

edit: seems to only work in Chrome, so you'd need to put the input inside another element. This works in FF and IE too:

<div id="parent">
    <div><input type="text"></div>
</div>

with this CSS:

#parent {
    position: relative;
    width: 400px;
}
  #parent div {
      position: absolute;
      left: 5px;
      right: 5px;
  }
    #parent div input {
        width: 100%;
    }

This has the expected effect. A bit hack-ish, maybe...

Width of absolute positioned input doesn't follow CSS rules

The issue is that an input is not like a div element and they won't behave the same. An input element will by default have styling set by the browser and you will notice that it also have a default width which is creating the issue.

If you refer to the specification or to this previous answer you will have the following formula:

'left' + 'margin-left' + 'width' + 'margin-right' + 'right' = width of containing block

Also a list of rules and in your case the width is never auto.

For your div you will fall into this rule:

'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'

Logically the width will be resolved after setting left and right and you will get the needed result.

For the input you will consider this:

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

A bit complex but in all the cases the width of the input will never change. Here is some basic example:

.box {  width:300px;  border:2px solid;  height:250px;  position:relative;}.box > input {  border:0;  background:green;  position:absolute;}.box > input:nth-child(1) {  left:0;  right:0;}.box > input:nth-child(2) {  top:50px;  left:100%;  right:0;}.box > input:nth-child(3) {  top:100px;  left:100%;  right:100%;}
.box > input:nth-child(4) {  top:150px;  left:50px;  right:50px;}.box > input:nth-child(5) {  top:200px;  left:80px;  right:100%;}

<div class="box"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"></div>

CSS: How to make an input box stretch to the width of its given absolute position left and right value?

Try this. Check support calc() for u browser http://caniuse.com/#search=calc

.input_one {
  position: absolute;
  left: 5px;
  right: 61%;
  width: calc(100% - 5px - 61%);
  box-sizing: border-box;
}
.input_two {
  position: absolute;
  right: 32px;
  left: 40%;
  width: calc(100% - 32px - 40%);
  box-sizing: border-box;
}

Adjust the width of an absolute positioned element, based on the content inside

As mentioned by @CBroe you can add white-space:nowrap to .content. Below is a working example.

.toggle .trigger {  cursor: pointer; }
.toggle input[type='checkbox'].trigger {  display: none; }
.toggle .content {  display: none; }
.toggle .trigger:checked ~ .content {  display: block; }
.container {   height:120px;  position: relative;  background-color:red;}
.container-right {  background: #0069aa;  height: 100%;  position: absolute;  right: 0;  top: 0; }    .container-right .toggle {    padding: 0 1rem;    position: relative;    text-align: center;    top: 50%;    transform: translateY(-50%);  }    .container-right .toggle .trigger {      color: #fff;}
      .container-right .toggle .trigger * {        display: block; }              .container-right .toggle .trigger::after {        content: "a";    }      .container-right .toggle .trigger:checked ~ label {        color: #4FA738; }              .container-right .toggle .trigger:checked::after {        content: "x"; }            .container-right .toggle .content {      background: #0069aa;      position: absolute;      right: 0;      display:none;      top: 71.5px;      /* ###### Add this ###### */      white-space: nowrap;      }            .container-right .toggle .content ul li {        display: inline-block; }                ul {        padding:0        }

<div class="container"> <div class="container-right">        <div class="toggle">            <input type="checkbox" id="menu-toggle"  class="trigger"/>            <label for="menu-toggle" class="trigger">                <span>Tomandji</span>            </label>    <div class="content">    <ul>        <li class="c-list__item"><a href="#">First link</a></li>        <li class="c-list__item"><a href="#">Second link</a></li>        <li class="c-list__item"><a href="#">Third link</a></li>    </ul>    </div></div></div>

How to absolute positioning an icon inside input with text align and 50% width

See Snippet.

 .search {           position: relative;          text-align:center;          background-color:#ddd;          padding:2em 0;        }        .search_inner{          width:60%;          position:relative;          margin:auto;                    }            input[type="search"] {           text-indent: 2em;          font-size:1.9em;          padding:0.2em 0;          width:100%;        }                         .fa-search {           position: absolute;          left: 10px;          top:50%;          transform: translateY(-50%);          font-size: 2em;          color:orange;          }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search">   <div class="search_inner">         <i class="fa fa-search" aria-hidden="true"></i>    <input type="search" class="search-field" placeholder="Buscar" name="s" />   </div>
</div>

input absolute does not grow from left to right like div absolute?

You need to specify width manually, as input doesn't react as a div.

Most of the time, absolutely positioned elements that have height and
width set to auto are sized so as to fit their contents

https://developer.mozilla.org/en-US/docs/Web/CSS/position

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: blue;
}

div, input{
  position: absolute;
  left: 20px;
  right: 20px;
  height: 20px;
}

div {
  top: 0;
  background-color: red;
}

input {
  top: 20px;
  background-color: orange;
  width: calc(100% - 40px); /* does not react as a div, need to manually specify width */
  border: 0; /* remove default border */
  padding: 0; /* remove default padding */
}

<div class="wrapper">
  <div></div>
  <input>
</div>

Input fields don't work in absolute positioning

You have two position properties on on element. #open has absolute and fixed. I got rid of absolute and left fixed now it works.

ORIGINAL CSS

#open
font-family: $mainfont
position: absolute; \\2 positions is not good
position: fixed;
width: 100%

NEW CSS

#open
font-family: $mainfont
top: 0px;      \\ I added this
position: fixed; \\ I deleted position: absolute and kept fixed
width: 100%
z-index: 1  \\ You added the z-index: 1 which isn't that necessary since the rest of your elements are static.

Problem with position:absolute on input

Setting position:absolute removes the element from the document flow, meaning it basically doesn't occupy any space. Since this is the only element in the div, and there is no height width or padding on it, it doesn't take up any space either, so you cannot see the background.

Using Position:Absolute to Set an Inputs Width