Home/ Questions/Q 3309362
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T21:37:54+00:00

I am trying to align a text Email and textbox for it on top

  • 0

I am trying to align a text Email and textbox for it on top of an image at a specific location. I want the position to be fixed, no matter what size the screen is. Here is my html code:

<html>
<head>
<style type="text/css">
#container {
  background-color:blue;
}
#content {
  background: url('images/orange.jpg')  no-repeat center top;
}
#c_main {
  color: yellow;
}
#c_email {
  position:absolute;
  top:200px;
  left:410px;
  color: #FFFFFF;
  font-size: 15px;
}
#c_emailbox1 {
  position:absolute;
  top:200px;
  left:480px;
}
#c_emailbox2 {
  position:absolute;
  top:200px;
  left:620px;
  color: white;
  font-size: 12px;
}
input {
  border:0;
}
.email_textbox1 {
  width:130px;
  background-image:url('images/text_bg.jpg');
  background-repeat:no-repeat;
}
.email_textbox2 {
  color: #FFFFFF;
  font-size: 11px;
  width:130px;
  background-image:url('images/text_bg.jpg');
  background-repeat:no-repeat;
}
</style>
</head>
<body>
  <div id="container">
    <div id="content" style="height:1000px;left:0px;border:1px solid red;position:relative" >
      <div style="height:100px;width:200px;border:1px solid red;position:absolute;top:250px;left:0px">
        <h4> CREATE A USERNAME AND PASSWORD </h4>
      </div>
    <div id="c_email">
      Email
    </div>
    <div id="c_emailbox1">
      <input type="textbox" id="email1" border="0" class="email_textbox1">
    </div>
    <div id="c_emailbox2">
      <input type="text" id ="email" value="Confirm Email Address" class="email_textbox2" onfocus="if
(this.value==this.defaultValue) this.value='';">
    </div>
  </div>
</div>
</body>
</html>

I cannot get it to align relative to the image. The text and textbox are misplaced when seen in a larger screen or if zoomed in and out. Suggestion please.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See my sample code. This is working. Change the height of parent div, the child always stays at bottom:

    <div style="height:300px;border:1px solid red;position:relative"> 

   <div style="height:100px;width:20px;border:1px solid red;position:absolute;bottom:0px">
   </div>

</div>
    • 0