CODEWITHSUNDEEP
htmlcss
Christopher Gagnon
Christopher Gagnon

Reputation: 11

CSS Alignment within div still having issues

What I'm looking to do is have Protein and Water aligned one on top of the other on the right hand side.

Then I would like to align on the left hand side, the labels Pounds of Body Fat, Lean Body Mass, Daily Water Intake, and Daily Protein Intake.

Lastly, I would like to have another div aligned to the right side of the main div that would display instructions to the user.

I have been working on this since 6am and trying my best. I tweak something and it breaks something else. Please help.

A stack overflow answer was to put the entire thing into a table. So I did that and now the calculation no longer works?

Dr. Kosimides Lean Body Academy Calculator

body
{
    background:#504E4F;
}

main
{
    border:2px solid #504E4F;
    padding:10px 10px;
    background:#F4C62F;
    width:300px;
    border-radius:20px;
    box-shadow: 10px 10px 2px #CCC;
    text-align: center;
    margin-right:auto;
    margin-left:auto;
}


h1
{
    color:#9F9D9E
    text-align:center;
}

</style>
</head>

<body>


    <main>
    <form>
        <h1>LBA Calculator</h1>
        <br />
        <label> Weight
                <input type="text" name="weight" id="weight" size="5" /> (lbs)
        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label> Body Fat
                <input type="text" name="bodyfat" id="bodyfat" size="3" /> (%)
        </label>
        <br />
        <br />
         <label> Protein
                <input type="text" name="protein" id="protein" size="3" />
        </label>
        <br />
         <label> Water
                <input type="text" name="water" id="water" size="3" />
        </label>
        <br />
        <br />
         <label> Pounds of Body Fat
                <input type="text" name="lbf" id="lbf" size="3" /> (lbs)
        </label>
        <br />
        <label> Lean Body Mass
                <input type="text" name="lbm" id="lbm" size="3" /> (lbs)
        </label>
        <br />
        <label> Daily Water Intake
                <input type="text" name="dwi" id="dwi" size="3" /> (ounces)
        </label>
        <br />
        <label> Daily Protein Intake
                <input type="text" name="dpi" id="dpi" size="3" /> (grams)
        </label>
        <br />
        <input type="button" name="Calculate" value="Calculate" onClick="LBAcalc()" />
        <input type="reset" name="Reset" value="Reset" />
    </form>
    </main>


    <script>

        function LBAcalc()
        {


                 // Get The Input

                var w_txt = document.getElementById('weight');
                var bf_txt = document.getElementById('bodyfat');
                var p_txt = document.getElementById('protein');
                var wtr_txt = document.getElementById('water');


                 // Convert To Numbers If Needed

                var w = parseInt(w_txt.value);
                var bf = parseInt(bf_txt.value);
                var p = parseFloat(p_txt.value);
                var wtr = parseFloat(wtr_txt.value);


                // Convert body fat to percentage

                bf = bf / 100

                // Process and Display Results

                var result = document.getElementById ('lbf');
                var myResult = w * bf;
                result.value = myResult.toFixed(0);

                var result1 = document.getElementById ('lbm');
                var myResult1 = w - myResult;
                result1.value = myResult1.toFixed(0);

                var result2 = document.getElementById ('dwi');
                var myResult2 = myResult1 * wtr;
                result2.value = myResult2.toFixed(0);

                var result3 = document.getElementById ('dpi');
                var myResult3 = myResult1 * p;
                result3.value = myResult3.toFixed(0);


        }



    </script>

This originally was an Excel Spreadsheet as seen here.

Original Excel Image

This is a mock up of what I'm looking to accomplish.

Mock Up

Upvotes: 0

Views: 40

Answers (1)

Kristian Oye
Kristian Oye

Reputation: 1202

You could use divs with floats and/or fixed-width and display of inline-block, but there are times where tables are perfectly acceptable... this seems like one of those situations to me:

<table>
  <tr>
    <td class="key"><label for="weight">Weight:</label></td>
    <td class="val"><input id="weight" name="weight"/> (lbs)</td>
    <td class="howto" rowspan="8">
      Some instructions go here.
    </td>
  </tr>
  <tr>
    <td class="key"><label for="bodyFat">Body Fat:</label></td>
    <td class="val"><input id="bodyFat" name="bodyFat"/></td>
  </tr>
   ....

https://jsfiddle.net/hr6oas9j/

Upvotes: 1

Related Questions