Strange Behaviour When Absolute Positioning an Input with Both Left and Right CSS Properties

Strange behaviour when absolute positioning an INPUT with both left and right CSS properties

Observations

I'm surprised by this behavior. top-right-bottom-left absolute positioning works marvelously (and has for years) but it's ignored by IE 10 and FF on input type="text"

Red herring: your approach does work with input type="range" but not input type="number" in IE 10. Perhaps this is related to which inputs the browser takes sole responsibility for drawing, versus those inputs that may thinly wrap functionality already provided by the OS.

In FF (PC/Mac) I observed that the size property of the input seems to override anything but an explicit width assignment. For example, setting size=4 will make the input more narrow than desired. The observed width seems to be the result of an implicit size=20 value.

Workarounds

All that said, I do have a potential solution which doesn't require extensive changes to your code and works in IE9/10, FF (PC/Mac), Chrome (PC/Mac) and Safari (Mac).

Demo: http://jsfiddle.net/ws9hf/13/

#sidebar .x {
    position: absolute;
    box-sizing: border-box;
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    left: 30px;
    right: 30px; /* fallback */
}

This uses the cacl() function which has decent browser support. It's worth noting that this feature is deemed "at risk" by the W3, so its future may be uncertain.

As "cool" as the calc() function is—being pragmatic—I'd probably wrap the offending input(s) in another element and be done with it. You'll achieve wider browser support, and future compatibility.

Absolute positioning input with left and right in IE9 doesn't work

Input elements don't like being stretched like that. Put it in a containing <div>, position the <div>, and then use width:100% on the input.

html input element ignores CSS left+right properties?

You can Use a Wrapper DIV

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>

Strange behavior of an input html element with display: block

If you don't want the padding on a grid parent element to effect its children, surround all its children elements in a block element with a class of row.

Bootstrap input elements are meant to span the whole width of there parent elements even without display block style attribute.

<div class="col-md-12">
  <div class="row"> <!--this is what you need -->

  </div>
</div>

full example code

<div class="col-md-12">
    <div class="row">
        <input type="text" placeholder='I\'m some damned input' />
    </div>
    <div class="row">
        <div>I am some div</div>
    </div>
</div>

How to prevent an absolutely positioned element to affect the scrollbar?

This seems a bit of a janky approach and has a small caveat, but it's pure CSS/ no HTML structure modifications.

Essentially, I make the .container the main parent instead of trying to work from a lower level (.autosuggest). Step by step:

Move position: relative up to .container
Make the .autosuggest positioned absolutely (top / left default to 0px).
- Give it a higher z-index so it's always on top
make .content positioned absolutely all four sides 0px so it's same size as .container
Move the overflow scrollbar to the .content div
(here's the caveat) Set the top padding of .content to the height of .input + the actually desired padding. Otherwise the .content is behind the input element.

And you end up with this:

    .container {

      height: 100px;

      width: 300px;

      margin-top: 50px;

      border: 1px solid black;

      position: relative;

    }

    .autosuggest {

      width: 250px;

      position: absolute;

      z-index: 50;

    }

    .input {

      font-size: 16px;

      width: 230px;

      padding: 5px 10px;

      border: 0;

      background-color: #FFEBBF;

    }

    .autosuggest .input:focus ~ .suggestions{

      display: block;

    }

    .suggestions {

      display: none;

      list-style-type: none;

      margin: 0;

      padding: 5px 10px;

      width: 230px;

      background-color: #85DDFF;

    }

    .content {

      overflow-y: auto;

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      padding: 28px 10px 5px;

    }

<div class="container">

  <div class="autosuggest">

    <input class="input" type="text" value="input">

    <ul class="suggestions">

      <li>suggestion 1</li>

      <li>suggestion 2</li>

      <li>suggestion 3</li>

      <li>suggestion 4</li>

      <li>suggestion 5</li>

      <li>suggestion 6</li>

      <li>suggestion 7</li>

      <li>suggestion 8</li>

      <li>suggestion 9</li>

    </ul>

  </div>

  <div class="content">

    content content<br >content content content content content<br ><br ><br ><br ><br ><br >content content content

  </div>

</div>

Position all elements relative to left edge of container

This happens because as per your CSS all input elements are 150px to the left of the corresponding label but those are not the same width, so your inputs are not aligned.

You need to make all labels the same width:

.basicForm label{
    float:left;
    clear:left;
    min-width:150px;
}

.basicForm input{
    float:left;
}

Instead of min-width you could also use width, whichever you prefer.

If you insist on using absolute positioning, you could wrap each label/input pair in a div so you don't need to position each element individually, check this example:

.input-group {

  position: relative;

  height:2em;

}

.input-group label {

  position: absolute;

  top: 0;

  left: 0;

}

.input-group input {

  position: absolute;

  top: 0;

  left: 100px;

}

<div class="input-group">

  <label>Label 1</label>

  <input type="text">

</div>

<div class="input-group">

  <label>longer Label</label>

  <input type="text">

</div>

<div class="input-group">

  <label>short</label>

  <input type="text">

</div>

CSS Absolute position occasionally not respected

The inconsistent behaviour is due to two things: one, you've not set the actual position (e.g. top/left) for the .items, and two, your image has no dimensions specified, so its size won't be known by the browser until it's loaded.

Because you haven't specified a position, but have specified absolute positioning, the .item elements are defaulting to the values they would have if they were statically positioned. That is, they'll be directly below the image.

I believe that when you're seeing the .items below the image, that's because the image is in your cache, so the browser knows how big it is on its initial layout run, and sets the static position of the .items below the image.

When you're seeing the .items on top of the image, that's because the browser hasn't worked out how big the image is on its initial layout run (i.e. it's still loading) so it positions the .items as though the image has zero height. Usually, once the image was loaded, the layout would be recalculated, and the .items would move down, but because you've specified their positioning as absolute, I believe the browser is assuming it doesn't need to reposition them, as the image size shouldn't affect their positioning, because they've been taken out of the normal layout flow.

Anyway. Specify an actual position for your absolutely-positioned elements, and everything should start working.

CSS: Few questions about position absolute

Why does div jump down, when changed div width units from px to percentage(40px = 12.2%) How can I fix this, if I want to use percentage?

Your div is in a container that has no defined width. Since the div itself can change the width of the container, CSS cannot resolve a width set as a percentage. To solve that depends on what is your actual goal...

Why does div jump down, when resizing a window even when there is still space? How can I fix this?

By default, left, right, bottom, top are set to auto. The width of your container is set by its content, but auto on a side property means "the value of right cannot be lower than 0." So, since your left is set to 50% and right to auto (default), it is equivalent to setting max-width to 50%: your container cannot take more than 50% of it relative parent width.

Here a GIF to help you visualize what's happening:

DIV resize based on right auto

To solve that, you need another wrapper and a different centering trick such as inline-block content:

*, *:before, *:after {

    -webkit-box-sizing: inherit;

    box-sizing: inherit;

}

*{

  margin: 0;

}

html {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

/**

 new element

 */

.center{

  position: absolute;

  top: 50%;

  left: 0;

  width : 100%;

  font-size : 0;

  text-align:center;

  transform: translateY(-50%);

}

/**

 center with inline block

 */

main{

  display:inline-block;

  font-size : 1rem;

  border: 2px red solid;

  padding: 10px;

}

h1{

  font-size: 32px;

  width: 10em;

  border: 2px black dotted;

}

p{

  font-size: 32px;

  width: 10em;

  border: 2px green dotted;

  display: inline-block;

  vertical-align: middle;

}

.block{

  display: inline-block;

  width: 40px; /*  12.2%  */

  height: 40px;

  background: lawngreen;

  vertical-align: middle;

  border: 2px blue dotted;

}

<div class="center">

  <main>

    <h1>Hello World</h1>

    <p>Lorem ipsum dolor</p>

    <div class="block"></div>

  </main>

</div>

CSS floating left weird behavior

Just set:

.short-movie {
  height: 275px;
}

To make all movie items be of the same height and stop them being affected by the previous elements height.

Strange Behaviour When Absolute Positioning an Input with Both Left and Right CSS Properties