-1

I'm just a beginning programmer. I've learned the basics of javascript and css. I'm trying to find out how I can get a webpage with this layout:

form layout picture

I can center the h1. I everything below the h1 in <form> so that the reset button would work. but I feel like the rest of it, I can't right or left justify it, because I don't want it to be clear to either side. I think I'm supposed to do some sort of table thing maybe (in the style) but I really don't know; I for sure don't know how to execute it. I don't know if I should be stylizing the body, the form, the input or what.
I did try:

input {
    text-align:center;
    float:right;
    clear:both;
}

but then the input boxes got miss-aligned from their descriptive texts. My body currently looks like this:

<body>
<h1>Investment Calculator</h1>
<form action="demo_form.asp" method="get">
<br> Amount invested (principle)
<input type="text" style="text-align: right;" id="amountInvested">
<br> Annual rate
<input type="text" id="annualRate">
<br> Number of years 
<input type="text" id="numberOfYears">
<br> Periods per year 
<input type="text" id="ppy">
<br><button type="button" onclick="doFutureValue()">Compute future value</button>
<input type="text" id="boxput">
<br>
<button type="reset" value="Reset">Reset</button>
</body>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Emma Chapman
  • 1
  • 1
  • The best, and imho, way to learn is with trial and error, after having read how to create HTML forms and style the with CSS. "I dunno, I think kinda, sortof or what" will not get you any further. Table? Read the specs and try it. Everyone on SO is happy to help out, but it is you who needs to do the hard work. – Rene van der Lende Nov 25 '15 at 03:36

1 Answers1

0

You have a typo in you HTML to begin with, I have fixed it (missing close tag on form) and secondly I updated your css so that the reset button is below the input fields:

Working example: http://plnkr.co/edit/0rQhnqeSv2WnPUUTP046?p=preview

Updated CSS:

input, button[type="reset"] {
        text-align:center;
        float:right;
        clear:both;
    }
km1882
  • 740
  • 5
  • 22