Why won't parent padding push elements inwards when child is floating?

dylosaur
May 15, 2023
163 views
2 votes
3 Answers

vs. what I have:

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

.formDiv {
  text-align: center;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="salesTax.css">
    <title>Sales Tax Calculator</title>
  </head>

  <body>
    <main>
      <div id="border">
        <h1>Sales Tax Calculator</h1>
        <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
        <form>
          <div class="formDiv">
            <label for="subtotal">Subtotal:</label>
            <input type="text" id="subtotal">
          </div>
          <div class="formDiv">
            <label for="taxRate">Tax Rate:</label>
            <input type="text" id="taxRate">
          </div>
          <div class="formDiv">
            <label for="salesTax">Sales Tax:</label>
            <input type="text" id="salesTax" disabled>
          </div>
          <div class="formDiv">
            <label for="total">Total:</label>
            <input type="text" id="total" disabled>
          </div>
          <div class="formDiv">
            <input type="button" id="calculate" value="Calculate">
            <input type="button" id="clear" value="Clear">
          </div>
        </form>
      </div>
      <script src="salesTax.js"></script>
    </main>
  </body>

</html>

As far as I can tell, the float: left applied to the labels here is causing them to fill up as much of #formDiv as possible to get the labels to the left of the inputs. Since I want the labels and inputs to be more centered, I thought I would apply padding to the #border, but all that does is expand it outward rather than pushing the inner elements inwards.

Why is that? Is there anything I can do to prevent that without removing any of the provided CSS? (The only CSS I can delete parts of is the CSS for #border. The rest is part of the specification, but can be added onto.)

Answers

If I understand the question properly, then adding:

display: flex;
justify-content: center;

to the div that wraps the inputs (buttons) should achieve the result you’re looking for:

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}

.btns {
  display: flex;
  justify-content: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="salesTax.css">
  <title>Sales Tax Calculator</title>
</head>

<body>
  <main>
    <div id="border">
      <h1>Sales Tax Calculator</h1>
      <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
      <form>
        <div id="formDiv">
          <label for="subtotal">Subtotal:</label>
          <input type="text" id="subtotal">
        </div>
        <div id="formDiv">
          <label for="taxRate">Tax Rate:</label>
          <input type="text" id="taxRate">
        </div>
        <div id="formDiv">
          <label for="salesTax">Sales Tax:</label>
          <input type="text" id="salesTax" disabled>
        </div>
        <div id="formDiv">
          <label for="total">Total:</label>
          <input type="text" id="total" disabled>
        </div>
        <div id="formDiv" class="btns">
          <input type="button" id="calculate" value="Calculate">
          <input type="button" id="clear" value="Clear">
        </div>
      </form>
    </div>
    <script src="salesTax.js"></script>
  </main>
</body>

</html>

Probably, in your case, the use of a <table> will be appropriate:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#border {
  border: .25em solid blue;
  padding: 20px;
  max-width: 600px;
}

#border h1 {
  color: blue;
  margin-bottom: 10px;
}

#border p {
  margin-bottom: 10px;
}

#border table {
  margin: 0 auto;
}

#border table td {
  padding-bottom: 10px;
}

#border table td:first-child {
  text-align: right;
  padding-right: 10px;
}

<main>
  <div id="border">
    <h1>Sales Tax Calculator</h1>
    <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
    <form>
      <table>
        <tr>
          <td><label for="subtotal">Subtotal:</label></td>
          <td><input type="text" id="subtotal"></td>
        </tr>
        <tr>
          <td><label for="taxRate">Tax Rate:</label></td>
          <td><input type="text" id="taxRate"></td>
        </tr>
        <tr>
          <td><label for="salesTax">Sales Tax:</label></td>
          <td><input type="text" id="salesTax" disabled></td>
        </tr>
        <tr>
          <td><label for="total">Total:</label></td>
          <td><input type="text" id="total" disabled></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="button" id="clear" value="Clear">
            <input type="button" id="calculate" value="Calculate">
          </td>
        </tr>
      </table>
    </form>
  </div>
</main>

Update. If you have a phobia of tables 🙃:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#border {
  border: .25em solid blue;
  padding: 20px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
}

#border h1 {
  color: blue;
  margin-bottom: 10px;
}

#border p {
  margin-bottom: 10px;
}

#border form {
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

#border form label {
  text-align: right;
}

<div id="border">
  <h1>Sales Tax Calculator</h1>
  <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
  <form>
    <label for="subtotal">Subtotal:</label>
    <input type="text" id="subtotal">
    <label for="taxRate">Tax Rate:</label>
    <input type="text" id="taxRate">
    <label for="salesTax">Sales Tax:</label>
    <input type="text" id="salesTax" disabled>
    <label for="total">Total:</label>
    <input type="text" id="total" disabled>
    <span></span>
    <span>
      <input type="button" id="clear" value="Clear">
      <input type="button" id="calculate" value="Calculate">
    </span>
  </form>
</div>

If you can add style via the #border selector, then you can easily overwrite other styles.

Possible example :

div#border {
  max-width: max-content;
  padding-right: 2em;
  margin: auto;
  display: grid;/* or inline-grid */
  justify-content: center;
}

#border .formDiv {
  display: flex;
  justify-content: center;
}

#border label {
  width: auto;
  flex: 1;
}

snippet to test render

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

.formDiv {
  text-align: center;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}
/* overwrite previous style if already defined */
div#border {
  max-width: max-content;
  padding-right: 2em;
  margin: auto;
  display: grid;/* or inline-grid without max-width/padding/margin */
  justify-content: center;
}

#border .formDiv {
  display: flex;
  justify-content: center;
}

#border label {
  width: auto;
  flex: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="salesTax.css">
  <title>Sales Tax Calculator</title>
</head>

<body>
  <main>
    <div id="border">
      <h1>Sales Tax Calculator</h1>
      <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
      <form>
        <div class="formDiv">
          <label for="subtotal">Subtotal:</label>
          <input type="text" id="subtotal">
        </div>
        <div class="formDiv">
          <label for="taxRate">Tax Rate:</label>
          <input type="text" id="taxRate">
        </div>
        <div class="formDiv">
          <label for="salesTax">Sales Tax:</label>
          <input type="text" id="salesTax" disabled>
        </div>
        <div class="formDiv">
          <label for="total">Total:</label>
          <input type="text" id="total" disabled>
        </div>
        <div class="formDiv">
          <input type="button" id="calculate" value="Calculate">
          <input type="button" id="clear" value="Clear">
        </div>
      </form>
    </div>
    <script src="salesTax.js"></script>
  </main>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Why won’t parent padding push elements inwards when child is floating?

Answers