HTML＆amp; CSS：旁边/部分对齐

Question

在我的某些页面上，该部分比我的旁边长。我不想改变我的旁边长度，因为这会使页面上的短内容不必要地长一些页面。

我的问题是，一旦我的部分超出了我的旁边，文字一直到我旁边的左边。我想让它一直向下，所以这一切都符合要求。有意义吗？

我似乎无法找到合适的CSS来实现这一目标。有人可以帮忙吗？

＆＃13;

＆＃13;

aside {
  float: left;
  width: 155px;
  height: 200px;
  padding-right: 25px;
  margin-top: 25px;
}

aside ul {
  padding-left: 5px;
  list-style: none;
  /* Removes bullets from list items */
}

aside li {
  margin-bottom: 0.50em;
  border: 3px solid black;
  border-radius: 20px;
  background-color: yellow;
}

aside li a {
  display: block;
  /* Makes whole box clickable */
  padding: .5em 1em;
  /* Space around text */
  text-decoration: none;
  /* Removes underlines */
  color: black;
}

aside a.current {
  color: green;
}

/* Section */

#learnin {
  color: purple;
  font-variant: small-caps;
  font-family: "Courier", monospace;
  width: 700px;
}

section img {
  float: right;
  padding: 10px;
}

section li img {
  float: right;
  padding: 10px;
}

section {padding: 5px 20px;/* top right bottom left */}
section ul {padding-left: 0px;}
section p {padding-right: 10px;}
section h3 {
  clear;
  both;

}

section li {
  margin-left: 12em;
}

section a {
  font-weight: normal;
  color: blue !important;
}

img.smiles {
  clear: all;
  float: none;
  padding: 0px;
}

ul.nested {
  clear: all;
  margin-left: 3em;
}

＆＃13;

<aside>
  <nav>
    <ul>
      <li><a href="link1.html">Link 1</a>
      </li>
      <li><a href="link2.html">Link 2</a>
      </li>
      <li><a href="link3.html">Link 3</a>
      </li>
    </ul>
  </nav>
</aside>

<section>
  <p>[text] ...
  </p>
</section>

＆＃13;

＆＃13;

＆＃13;