title: HTML+CSS Footer - formatting text beneath menu
body: <p>Trying to get the text beneath the "Menu" (as in Picture 2) . What is the 'correct' way to do this? I have been playing around with the meniubot and textbox margins, padding, display:block, display:inline-block, float:left, clear:both but I can't get it properly aligned as seen in the second picture. </p>
  
  <p>Any ideas? Maybe I should be using a different class for each text box and set custom margins?</p>
  
  <p>What I have:</p>
  
  <p><img src="https://i.stack.imgur.com/nvb67.jpg" alt=""></p>
  
  <p>What it has to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/t5vje.jpg" alt=""></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="footer"&gt;
          &lt;div class="main"&gt;
  
              &lt;div class="logo2"&gt;
                  &lt;a href="#"&gt;&lt;img src="logo2small.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="meniubot"&gt;
                  &lt;a href="#1"&gt;naujienos&lt;/a&gt;
                  &lt;a href="#2"&gt;krepšinio vadovas&lt;/a&gt;
                  &lt;a href="#3"&gt;treniruotė&lt;/a&gt;
                  &lt;a href="#"&gt;įdomybės&lt;/a&gt;
                  &lt;a href="#"&gt;galerija&lt;/a&gt;
                  &lt;a href="#"&gt;apie mus&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="ytfb2"&gt;
                  &lt;a href="#"&gt;&lt;img src="yttopedit.png"&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="ftopedit.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="textbox"&gt;
                  Wondering &lt;br&gt; how we can he &lt;br&gt; Ip your game &lt;br&gt; Basketball HQ &lt;br&gt; Lomprehensive &lt;br&gt; Resource &lt;br&gt; Designed for basketball
  
              &lt;/div&gt;
              &lt;div class="textbox"&gt;
                  Wondering &lt;br&gt; how we can he &lt;br&gt; Ip your game &lt;br&gt; Basketball HQ &lt;br&gt; Lomprehensive &lt;br&gt; Resource &lt;br&gt; 
              &lt;/div&gt;
              &lt;div class="textbox"&gt;
                  Wondering &lt;br&gt; how we can he &lt;br&gt; Ip your game &lt;br&gt; Basketball HQ &lt;br&gt; Lomprehensive &lt;br&gt; Resource &lt;br&gt; Desiasketball coach
              &lt;/div&gt;
              &lt;div class="textbox"&gt;
                  Wondering &lt;br&gt; how we can he &lt;br&gt; Ip your game &lt;br&gt; Basketball HQ 
              &lt;/div&gt;
  
  
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#footer{
          bottom:0px;
          background-image:url(meniuBG.jpg);
          height:252px;
          margin-top:220px;
      }
  
      .logo2{
          float:left;
          margin-top:35px;
  
      }
  
      .ytfb2{
  
          clear:both;
  
  
      }
  
      .ytfb2 a{
          float:left;
          margin-top:40px;
          margin-right:20px;
      }
  
      .meniubot{
          float:left;
          margin-left:15px;
          margin-top:40px;
  
      }
  
      .meniubot a{
          text-align: center;
  
          float:left;
          text-decoration: none;
          font-style:italic;
          color:rgb(193,193,193);
          padding:0px 35px 0px 35px;
          text-transform:uppercase;
      }
  
      .textbox {
          float:left;
          margin-left:50px;
          margin-top:-20px;
          color:rgb(193,193,193);
          font-size:14;
  
      }
  </code></pre>