Search code examples
htmlcssalignmentcss-tables

HTML+CSS Footer - formatting text beneath menu

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.

Any ideas? Maybe I should be using a different class for each text box and set custom margins?

What I have:

What it has to look like:

HTML:

<div id="footer">
        <div class="main">

            <div class="logo2">
                <a href="#"><img src="logo2small.png"></a>
            </div>

            <div class="meniubot">
                <a href="#1">naujienos</a>
                <a href="#2">krepšinio vadovas</a>
                <a href="#3">treniruotė</a>
                <a href="#">įdomybės</a>
                <a href="#">galerija</a>
                <a href="#">apie mus</a>
            </div>

            <div class="ytfb2">
                <a href="#"><img src="yttopedit.png"></a>
                <a href="#"><img src="ftopedit.png"></a>
            </div>

            <div class="textbox">
                Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> Designed for basketball

            </div>
            <div class="textbox">
                Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> 
            </div>
            <div class="textbox">
                Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> Desiasketball coach
            </div>
            <div class="textbox">
                Wondering <br> how we can he <br> Ip your game <br> Basketball HQ 
            </div>



        </div>
    </div>
    </body>
</html>

CSS:

#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;

    }
Solution

  • Using a list might help you.

    <ul class="meniubot">
  <li>
    <a href="#1">Link</a>
    <div>text...</div>
  </li>
</ul>

    See fiddle: http://jsfiddle.net/ECd6J/