title: How to align links on top of each other inside of a box with CSS?
body: <p>My goal is to make a DIV that presents the latest four news links with the title and a small picture on <code>hover</code>.</p>
  
  <p>The box will be small (150px height by 50px width) and will expand to about 500px. Once an article is clicked, it will bring up a box that you may exit out of. This box will put a dark layer on the rest of the content so that it is focused on by the user.</p>
  
  <p>Anyways... here is my CSS I have currently.</p>
  
  <pre><code>#news {
      position: fixed;
      top: 250px;
      left:0px;
      background-color: blue;
      min-width: 20px;
      max-width: 600px;
      height: 200px;
  }
  
  #news a {
      display: none;
      padding-bottom: 5px;
      color: white;
  }
  
  #news:hover {
      display: block;
      padding: 0px 10px 0px 0px;
  }
  
  #news:hover a {
      display: block;
  }
  </code></pre>
  
  <p>My HTML uses the <code>a</code> tag to edit the position, but <strong>was wondering if anyone had any suggestions on how to go about making the boxes inside the div look neat and conform to my command?</strong></p>
  
  <p><img src="https://i.stack.imgur.com/dvOTr.png" alt="enter image description here"></p>