Question

I have three text inputs (2 input text, 1 textarea) and a submit button inside a div with position:relative. The 3 text inputs and a submit button all have position:relative as well. The first 2 inputs (q and d) line up as expected, but the last two (t and qS) lie off to the right and don’t follow the expected CSS. I would like all of the textboxes and the submit button to line up under each other the same distance from the left side.

Markup:

 <form method='POST' action='ask.php'>  
        <input type='text' id='q' >
        <textarea id='d'></textarea>
        <input type='text' id='t'>
        <input type='submit' value='submit' id='qS'>
    </form>

CSS:

 #q{
 position: relative;
 top: 30px;
 left: 20px;
 width: 400px;
 border: 1px solid orange;
 font-size: 13px;
 }

 #d{
 position: relative;
 top: 60px;
 left: 20px;
 height: 100px;
 width: 400px;
 }

 #qS{
 position: relative;
  top: 20px;
 left: 20px;
 }

 #t{
 position: relative;
 top: 20px;
 left: 100px;
 }

Answer 1

Your css is quite messy. To get what you want delete all your CSS and replace your HTML with this…

 <form method='POST' action='ask.php'>  
        <p><input type='text' id='q' ></p>
        <p><textarea id='d'></textarea></p>
        <p><input type='text' id='t'></p>
        <p><input type='submit' value='submit' id='qS'></p>
    </form>    

For further styling and spacing use CSS. There is no need to set anything to position:relative… and there’s no need to use top,left,right either. Simply use margin where needed. If you want to move everything together, set margin to your form element.