How to position this div next to the other?

Question

I've started learning web development, and for the life of me I cannot figure out how to position my #Info div to the right of the #inputForm div. It's been a good hour, and most places say that if both elements use "display:inline-block" it should work. I am definitely missing something. Any help is greatly appreciated!

header {
  background: black;
  color: rgb(0, 183, 255);
  font-size: 24px;
  padding: 10px 10px 1px 10px;
}

h1 {
  margin: 0px;
  font-size: 28px;
  border-bottom: 2px solid currentColor;
  /* line at top. TODO: make it turn into wave (D3 library maybe) */
}

h2 {
  margin: 0px 0px 0px 30px;
  font-size: 14px;
}

body {
  margin: 0%;
  background: rgb(58, 58, 58);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: white;
}

nav {
  background: black;
  display: flex;
  padding: 0px;
  float: right;
  margin-top: -50px;
  /* Because of float */
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  font-size: 0.8em;
  display: inline-block;
  /* Horizontal menu */
}


/* All input */

#inputForm {
  display: inline-block;
  background-color: darkgoldenrod;
}

#inputForm * {
  /* targets everything inside */
  margin: 5px;
}

#inputForm input {
  width: 42px;
  background-color: darkred;
}

.DataInput {
  width: 4%;
  background-color: gray;
}

.waveform {
  float: left;
  background-color: darkorchid;
}

.waveform label {
  display: inline-block;
  margin: 0px;
  padding: 0px;
}

#dataContainer {
  background-color: black;
}

#waveformContainer {
  display: inline-block;
  background: darkgreen;
}

.Info {
  display: inline-block;
  background-color: darkmagenta;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <title>Additive Generator</title>
</head>

<body>
  <header>
    <h1> Generate a waveform</h1>
    <h3> an <em>audio-visual</em> experience </h2>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Create</li>
        </ul>
      </nav>
  </header>

  <form id="inputForm">
    <div id="dataContainer">

      <div>
        <label>Harmonics</label>
        <input class="DataInput" type="number" value="10">
      </div>

      <div>
        <label>Amplitude</label>
        <input class="DataInput" type="number" value="10">
      </div>

      <div>
        <label>Frequency</label>
        <input class="DataInput" type="number" value="10">
      </div>

    </div>

    <div id="waveformContainer">
      <div class="waveform">
        <label for "Square">Square</label>
        <!-- Insert Image-->
        <input name="waveform" type="radio" value="1">
      </div>

      <div class="waveform">
        <label for "Saw">Saw</label>
        <input name="waveform" type="radio" value="2">
      </div>

      <div class="waveform">
        <label for "Mix">Mix</label>
        <input name="waveform" type="radio" value="3">
      </div>
    </div>
  </form>

  <div class="Info">
    The new section The sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new section
  </div>
</body>

</html>

https://jsfiddle.net/gr7kx3th/

score 0 · Accepted Answer · answered Nov 07 '20 at 19:43

0

Your div with "info" class and the form with id "infiForm" should been wrapped within same div and then you can position them with float css property. provide float: "left" property to form and provide float: "right" property to div having "info" class.

Other way to align them is flex property by using the following link. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Nov 07 '20 at 19:43

Shoaib

90
2
11

Thank you very much for the answer, it does exactly what I asked for. If I may be so bold as to ask for some further clarification: Now when I shrink my page from the sides, the `Info` text goes under the `infoForm`, creating the same problem. Any idea how to avoid this behaviour and ideally have the text wrap ? [edit: my mistake, your code is perfect] – giannis101 Nov 07 '20 at 19:54

How to position this div next to the other?

1 Answers1