Overlapping a font awesome icon inside a text field

Question

In an overlapping like the one below, how to prevent the large space between the title and text field?

.icon-link-mail {
  position: relative;
  left: 485px;
  top: 29px;
  padding: 8px 8px 7px 8px;
  z-index: 2
}

<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
  <label for="sendto">
              <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a>
              <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
              </label>
</form>

Result can be seen in this fiddle

Answer 1

Personally I'd just use a pseudo-element, but if you wish to use the <i> icon, then we can do that a lot better by using position:absolute instead of position:relative. Adding position:relative just moves the icon, but leaves the space that it would have taken. position:absolute won't leave that space.

We need to make sure to set the parent contain (label) to position:relative though, so that the icon will be absolutely positioned in relation to the parent instead of the entire page.

#mail_form label {
  position: relative;
}

.icon-link-mail {
  position: absolute;
  z-index: 2;
  right: 0;
}

<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
  <label for="sendto">
        <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a>
        <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
     </label>
</form>

Result

Fiddle

http://jsfiddle.net/Ay6Hw/4/