title: HTML/CSS: How can I float the 'a href' elements to the left without them leaving the div element that they are inside in?
body: <p>I have the following code for demonstration:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              a{
                display:block;
                float:left;
              }
              #linkDiv{
                  border-style:solid;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="linkDiv"&gt;
              &lt;a href=""&gt;test&lt;/a&gt;
              &lt;a href=""&gt;test&lt;/a&gt;
              &lt;a href=""&gt;test&lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want my links to be blocks and also each of them to be next to the other. Without <code>float:left</code> this is what I get:</p>
  
  <p><img src="https://i.stack.imgur.com/eyHL0.png" alt="enter image description here"></p>
  
  <p>However when I use <code>float:left</code> this is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/vjUfP.png" alt="enter image description here"></p>
  
  <p>thanks in advance</p>