Search code examples
htmlcssalignment

div under div in two-column layout

I'm making a basic citation generator mockup with two columns: one for the list of already-generated citations, and one with a form to create a new one. Each element is in a div. Because the form is shorter in height than the citation list, I'm putting an example image underneath that could be replaced with an advertisment.

However, despite placing the first column (citation list) and second (form and ad) in different divs, the ad stays underneath the citation list:

#container {
  text-align: center;
}

#header {
  margin-bottom: 3em;
  margin-top: 2em;
}

#header h3 {
  color: darkgrey;
  font-size: 1em;
}

#citationList {
  display: inline-block;
  float: left;
  margin-left: 15%;
  width: 30%;
}

#citationList #citations {
  border: 1px solid darkgrey;
  padding: 20px;
  border-radius: 15px;
  margin-top: 1.5em;
}

#creationForm {
  display: inline-block;
  float: right;
  margin-right: 15%;
  width: 30%
}

#creationForm form {
  border: 1px solid darkgrey;
  padding: 20px;
  border-radius: 15px;
  margin-top: 1.5em;
}

#creationForm form label {
  float: left;
}

#creationForm form input .textBox {
  float: right;
}

#adSpace {
  float: right;
}
<html>

<body>
  <div id="container">
    <div id="header">
      <h1>Citation Generator</h1>
      <h3>it's totally amazing</h3>
    </div>
    <div class="col-sm">
      <div id="citationList">
        <h4>Your Citations</h4>
        <ul id="citations">
          <li>Citations are listed here</li>
          <li>This can be however long</li>
        </ul>
      </div>
    </div>
    <div class="col-sm">
      <div id="creationForm">
        <h4>Create a Citation</h4>
        <form>
          <!-- Author -->
          <label for="someInput">Some input:</label>
          <input id="someInput" type="text" class="textBox" />
          <label for="moreInput">More input:</label>
          <input id="moreInput" type="text" class="textBox" />
          <label for="evenMoreInput">Even more input:</label>
          <input id="evenMoreInput" type="text" class="textBox" />
          <label for="muchMoreInput">Much more input:</label>
          <input id="muchMoreInput" type="text" class="textBox" />
      </div>
      <div id="adSpace">
        <img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
        <p>Advertisment</p>
      </div>
    </div>
  </div>
</body>

</html>

Solution

  • use clear:both; as shown below

    #adSpace {
    float: right;
    clear: both;
}