Strange behaviour when absolute positioning span around an input - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Strange behaviour when absolute positioning span around an input

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.editor-group {<!--  ww  w  .j a  va 2  s.  com-->
   display:inline-block;
   vertical-align:top;
   margin-left:6px;
   margin-right:11px;
}

.editor-label {
   min-width:121px;
   display:inline-block;
   vertical-align:middle;
}

.editor-field {
   min-width:151px;
   display:inline-block;
   margin:4px 0;
   vertical-align:middle;
}

.editor-field input {
   float:left;
}

.field-validation-error {
   background-repeat:repeat-x;
   min-width:21px;
   position:absolute !important;
   text-align:center;
   z-index:1001;
   outline:0 none;
   background-position:center center;
   background-color:Chartreuse;
   border:2px solid yellow;
   color:blue;
   margin-right:7px;
   padding:3px 6px 2px 7px;
   border-radius:5px 5px 5px 5px;
   box-shadow:0 3px 3px 0 pink;
   font-weight:normal;
   font-size:.86em;
   float:right;
}
</style> 
 </head> 
 <body> 
  <div class="editor-group"> 
   <div class="editor-label editor-required"> 
    <label for="NameOfReceiptNo1">Lore</label> 
   </div> 
   <div class="editor-field"> 
    <input type="text" value=""> 
    <span class="field-validation-error"> <span class="k-icon k-warning"></span>Lorem ipsum dolor </span> 
   </div> 
  </div> 
  <div class="editor-group"> 
   <div class="editor-label editor-required"> 
    <label for="NameOfReceiptNo1">Lore</label> 
   </div> 
   <div class="editor-field"> 
    <input type="text" value=""> 
    <span class="field-validation-error"> <span class="k-icon k-warning"></span>Lorem ipsum dolor </span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials