title: Whats the CSS to make something go to the next line in the page?
body: <p>How can I make an element automatically be positioned on a new line in the page? In HTML I could use <code>&lt;br&gt;</code>, but how do I add something like a <strong>line-break</strong> in CSS?</p>
  
  <p>Say I have the following code for example:</p>
  
  <pre><code>&lt;p&gt;Lorem ipsum dolor sit amet,
     &lt;span id="elementId"&gt;consectetur adipisicing elit.&lt;/span&gt;
     Magni totam velit ex delectus fuga fugit&lt;/p&gt;
  </code></pre>
  
  <p>The span is still positioned on the same line as the rest of the text. How can I move the span text on a new line purely through CSS?</p>
  
  <p>Another example is when using <code>display: inline-block</code> or <code>float</code>:</p>
  
  <pre><code>&lt;div class="smalldiv"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
  &lt;div class="smalldiv"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
  &lt;div class="smalldiv" id="elementId"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
  &lt;div class="smalldiv"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
  
  .smalldiv {
      display: inline-block; // OR
      float: left;
  }
  </code></pre>
  
  <p>How can I move one of the <code>&lt;div&gt;</code>s on a new line to create a new row?</p>