CODEWITHSUNDEEP
htmlcss
BluePrint
BluePrint

Reputation: 2134

Content of div moves below other div

Again I have problem with aligning my divs. The divs are aligned good but I can't get the content if the divs to align. This is my code:

.maketable {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-bottom: 20px;
  display: table;
  clear: both;
}
.makecell {
  display: table-cell;
}
<body>
  <div class="wrapper">
    <div class="maindiv">
      <div class="rightdiv">

        <h1>Välj utseende på framsidan</h1>
        <br />
        <div class="maketable">
          <div style="display: table-row;">

            <div class="makecell" id="cell1">
              <label for="bgchooser">Välj färg på framsidan:</label>
              <input class="color {valueElement:'bgValue'}" id="bgchooser" readonly style="border: 1px solid black">
              <input type="hidden" id="bgValue" value="ffffff" onchange="drawCanvas()">
              <br />
              <br />
              <label for="imageupload">Ladda upp egen bild:</label>
              <br />
              <br />
              <form action="wt_makefront.php?update=image" method="post" enctype="multipart/form-data">
                <input type="file" name="imageupload" id="imageupload">
                <input type="submit" id="submitupload" value="Ladda upp">
                <input type="reset" id="resetupload" value="Rensa" disabled>
              </form>
              <form action="wt_makefront.php?update=rmimage" method="post" enctype="multipart/form-data">
                <input type="submit" value="Ta bort bild">
              </form>
              Textfärg:
              <input class="color {valueElement:'txtValue'}" readonly style="border: 1px solid black">
              <input type="hidden" id="txtValue" value="000000" onchange="drawCanvas()">
              <br />
              <br />Om du vill ha en text på framsidan väljer du denna här.
              <br />Max tre rader, max 15 tecken per rad.
              <br />
              <br />
              <input type="text" id="txt-1" maxlength="15" onblur="drawCanvas()">
              <br>
              <input type="text" id="txt-2" maxlength="15" onblur="changeText()">
              <br>
              <input type="text" id="txt-3" maxlength="15" onblur="changeText()">
              <br>
            </div>


            <div class="makecell">
              <canvas id="imgCanvas" width="296" height="420" style="border:1px solid #000000;"></canvas>
            </div>

          </div>
        </div>
        <br />
        <div class="prevform">
          <form name="prevsubmitform" action="wt_choosetype.php" method="post">
            <input type="submit" value="Tillbaka">
          </form>
        </div>
        <div class="nextform">
          <form name="nextsubmitform" action="wt_part1start.php" method="post">
            <input type="submit" id="nextsubmit" value="Nästa">
            <input type="hidden" name="hidefrontcolor" value="">
            <input type="hidden" name="hidetextcolor" value="">
            <input type="hidden" name="hidefronttext1" value="">
            <input type="hidden" name="hidefronttext2" value="">
            <input type="hidden" name="hidefronttext3" value="">
          </form>
        </div>
        <div class="metertext">
          Sida 1/15
        </div>
        <div class="meter">
          <div class="meter-inside">
          </div>
        </div>
      </div>
      <script type="text/javascript">
        drawCanvas();
      </script>
    </div>
  </div>
</body>

The result:

enter image description here

As you can see, the content of the left div is positioned below the right div. I probably missed something really simple, but I can't find it anyhow. Can someone help me?

Upvotes: 0

Views: 54

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

Apply vertical-align: top to .makecell.

.maketable {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-bottom: 20px;
  display: table;
}
.makecell {
  display: table-cell;
  vertical-align: top;
}
<body>
  <div class="wrapper">
    <div class="maindiv">
      <div class="rightdiv">

        <h1>Välj utseende på framsidan</h1>
        <br />
        <div class="maketable">
          <div style="display: table-row;">

            <div class="makecell" id="cell1">
              <label for="bgchooser">Välj färg på framsidan:</label>
              <input class="color {valueElement:'bgValue'}" id="bgchooser" readonly style="border: 1px solid black">
              <input type="hidden" id="bgValue" value="ffffff" onchange="drawCanvas()">
              <br />
              <br />
              <label for="imageupload">Ladda upp egen bild:</label>
              <br />
              <br />
              <form action="wt_makefront.php?update=image" method="post" enctype="multipart/form-data">
                <input type="file" name="imageupload" id="imageupload">
                <input type="submit" id="submitupload" value="Ladda upp">
                <input type="reset" id="resetupload" value="Rensa" disabled>
              </form>
              <form action="wt_makefront.php?update=rmimage" method="post" enctype="multipart/form-data">
                <input type="submit" value="Ta bort bild">
              </form>
              Textfärg:
              <input class="color {valueElement:'txtValue'}" readonly style="border: 1px solid black">
              <input type="hidden" id="txtValue" value="000000" onchange="drawCanvas()">
              <br />
              <br />Om du vill ha en text på framsidan väljer du denna här.
              <br />Max tre rader, max 15 tecken per rad.
              <br />
              <br />
              <input type="text" id="txt-1" maxlength="15" onblur="drawCanvas()">
              <br>
              <input type="text" id="txt-2" maxlength="15" onblur="changeText()">
              <br>
              <input type="text" id="txt-3" maxlength="15" onblur="changeText()">
              <br>
            </div>


            <div class="makecell">
              <canvas id="imgCanvas" width="296" height="420" style="border:1px solid #000000;"></canvas>
            </div>

          </div>
        </div>
        <br />
        <div class="prevform">
          <form name="prevsubmitform" action="wt_choosetype.php" method="post">
            <input type="submit" value="Tillbaka">
          </form>
        </div>
        <div class="nextform">
          <form name="nextsubmitform" action="wt_part1start.php" method="post">
            <input type="submit" id="nextsubmit" value="Nästa">
            <input type="hidden" name="hidefrontcolor" value="">
            <input type="hidden" name="hidetextcolor" value="">
            <input type="hidden" name="hidefronttext1" value="">
            <input type="hidden" name="hidefronttext2" value="">
            <input type="hidden" name="hidefronttext3" value="">
          </form>
        </div>
        <div class="metertext">
          Sida 1/15
        </div>
        <div class="meter">
          <div class="meter-inside">
          </div>
        </div>
      </div>
      <script type="text/javascript">
        drawCanvas();
      </script>
    </div>
  </div>
</body>

Upvotes: 2

Related Questions