1

I am building a picture framing calculator. The output of the calculation will be displayed onto a square. To create the square - I'm using flex-basis: calc(50% - 10px);. The size of the square is my goal which works perfectly.

The problem I'm running into is that it's shifted to the left beneath the fieldset.

I have attempted to assign it <div class="content">, and center it that way, but that doesn't work either:

.content {
  margin: auto;
  padding: 10px;
  justify-content: center;
}

Below is a code snippet of what I'm referring to:

fieldset {
  border: 1px solid rgb(255, 232, 57);
  width: 350px;
  margin: auto;
  display: flex;
  margin-bottom: 10px;
}

.content {
  margin: auto;
  padding: 10px;
  justify-content: center;
}

.square-container-single {
  display: flex;
  flex-wrap: wrap;
}

.square-single {
  position: relative;
  flex-basis: calc(50% - 10px);
  margin: 5px;
  margin-bottom: 40px;
  border: 5px solid;
  box-sizing: border-box;
  background-color: gray;
}

.square-single::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square-single .content-single {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  /* added for centered text */
  justify-content: right;
  /* added for centered text */
  align-items: top;
  /* added for centered text */
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>I Was Framed - Calculator</title>

  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" type="text/css" href="form.css">
</head>

<body>
  <div class="content">
    <section>

      <form class="form-horizontal" action="index.html" onreset="resetOutput()" method="post">
        <fieldset>
          <legend>
            <center>
              <h2><b>Frame Width</b></h2>
            </center>
          </legend><br>
          <label for="frameWidth">Frame Width:&#160;&#160;</label>

          <input type="number" placeholder="Frame Width" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="frameWidth" id="frameWidth" style="width: 150px;"
          /> &#160;&#160;
          <select name="frameWidthFraction" id="frameWidthFraction">
            <option value="0">0</option>
            <option value="0.0625">1/16</option>
            <option value="0.0125">1/8</option>
            <option value="0.1875">3/16</option>
            <option value="0.25">1/4</option>
            <option value="0.3125">5/16</option>
            <option value="0.375">3/8</option>
            <option value="0.4375">7/16</option>
            <option value="0.50">1/2</option>
            <option value="0.5625">9/16</option>
            <option value="0.625">5/8</option>
            <option value="0.6875">11/16</option>
            <option value="0.75">3/4</option>
            <option value="0.8125">3/16</option>
            <option value="0.875">7/8</option>
            <option value="0.9375">15/16</option>
          </select>

        </fieldset>


      </form>

    </section>

    <div class="square-container-single">
      <div class="square-single">

        <div class="content-single">
          <span><div id="width"></div>
                    <div class="content-single spread">
                  <div id="height"></div>
                </div>
                    
                    </span>

        </div>
      </div>

    </div>

  </div>
  </div>
  </div>
</body>

</html>

As you can see from running the snippet - the square is not centered below the rectangle when it should be. Instead it shifts to the left. Therefore, can I get some guidance on how to center the square below the fieldset when using flex-basis?

Durendel
  • 489
  • 2
  • 12

0 Answers0