title: create two column responsive css html design that merges into 1 column when shrunk or viewed on mobile device
body: <p>So i'm not very web savvy, Im creating a FAQ page on my WordPress site, and I want to make a responsive two column layout with a list of questions that when the user clicks on one of these anchors, it takes them down to that answer on the page, like most FAQs. I want the list of these links to be in a two column layout, while everything else on the site is just 1 column layout, and I want it to be pretty smooth and good looking. I want the two column layout to eventually merge into one column when the screen shrinks/is used by a tablet or iPhone.  Here is my code, I feel like I'm close but it's looking bad when I implement it in WordPress. Any suggestions? </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.linkcontainer {
    width:100%;
    padding-bottom: 25px;
  }
  .linkleft {
    width:50%;
    float:left;
  }
  .linkright {
    width:50%;
    float:left;
  }
  
  @media(max-width:400px) {
    .linkleft {
      width:100px;
      float:none;
      display:block;
      position:relative;
    }
    .linkright {
      width:100px;
      float:none;
      display:block;
      position:relative;
    }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="linkcontainer"&gt;
    &lt;div class="linkleft"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#unique-identifier1"&gt;Can I ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier2"&gt;How much does ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier3"&gt;Is the process ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier4"&gt;What do I need to ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier5"&gt;What is the date?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier6"&gt;What information does the ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier7"&gt;After being ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier8"&gt;Where do I?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier9"&gt;How do I ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier10"&gt;How do I ?&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="linkright"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#unique-identifier11"&gt;Registering as a &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier12"&gt;Registering &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier13"&gt;Am I able to charge ?    &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier14"&gt;Can others be ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier15"&gt;Can I perform ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier16"&gt;What are the age limits ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier17"&gt;What is the definition of ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier18"&gt;What is the definition ?&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier19"&gt;All other questions CLICK HERE&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#unique-identifier20"&gt;All other OTHER questions CLICK HERE&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>