CODEWITHSUNDEEP
html
oski369
oski369

Reputation: 257

Basic HTML formatting issue

<!doctype html>
<html>
<head>
<style>
  body{
    background: #eee
  }
 #variableNames {
    float:left;
    margin:10px;
    padding:10px;
 }
 #variables{
    float:left;
    margin:10px;
    padding:10px;
 }
</style>
</head>
<body>
    <h1>Amortized Loan Calculator</h1>
    <div id = "variableNames">
        <h5 id = "Apr">Annualized Percentage Rate:<input type = "text"/></h5> 
        <h5 id = "Ttm">Time To Maturity In Months:<input type = "text"/></h5>
        <h5 id = "Cost">Asset Price:<input type = "text"/></h5>
        <h5 id = "DownPayment">Down Payment:<input type = "text"/></h5>
    </div>






    <script src = "mortgage.js"></script>
</body>
</html>

The JS file is irrelevant. Currently the text inputs sit directly to the right of each h5 element describing what goes in them. Because the headers are of different length, the inputs are misaligned. I want the inputs to be directly aligned with eachother along the x axis, as if they were in their own div element, however I also want each of them to line up directly with it's corresponding header along the y axis, hence why I can't do it by taking them out of their h5 parents and sticking them into divs. How could I solve this?

Upvotes: 1

Views: 48

Answers (2)

user764357
user764357

Reputation:

CSS Tables to the rescue!

  1. Firstly, you need labels not h5s.
  2. Second, I've wrapped your text spans.

Here is your new code:

<h1>Amortized Loan Calculator</h1>
<div id = "variableNames">
    <label id = "Apr"><span>Annualized Percentage Rate:</span><input type = "text"/></label> 
    <label id = "Ttm"><span>Time To Maturity In Months:</span><input type = "text"/></label>
    <label id = "Cost"><span>Asset Price:</span><input type = "text"/></label>
    <label id = "DownPayment"><span>Down Payment:</span><input type = "text"/></label>
</div>

And with this CSS

#variableNames {
  display:table;
}
#variableNames > label {
  display:table-row;
}
#variableNames > label > * {
  display:table-cell;
}

We get this (click to see a live fiddle) :

enter image description here

Upvotes: 1

steveben
steveben

Reputation: 46

You can add:

input{
        float:right;
    }

to your style sheet and i think that gives you what you are asking for. you can also make this specific to the h5's by changing the selector to:

h5 input{
        float:right;
    }

Upvotes: 1

Related Questions