Search code examples
csshtmlcss-floatpositionblock

My floating Divs don't line up


I am trying to make a nice CSS menu bar. The problem is no matter if each button is in it's own element or if it is in a

  • element, either way it always does this funny stepping thing:

    if you go to www.adversign.co.za/steps.jpg

    I have tried float:left; i have tried it with clear:both; i have tried it with display:inline-block; as well as display:block; But nothing that i do seems to align the tops of the div's at the same height.

    Please can someone help. my code is like this:

    <div id="list">
    <li><a href="index.html">&nbsp;</a></li>
    <li><a href="about.html">&nbsp;</a></li>
    </div> 
    

    and CSS:

    #list a { 
    float:left; 
    display: inline; 
    list-style:none; 
    background:url(images/home1.png) no-repeat; 
    background-position:top left; 
    width:104px; 
    height:109px; 
    font-size:1px; 
    color:#000; 
    text-decoration:none; 
    margin-left:0px;
    } 
    #list a:hover{ 
    background:url(images/home2.png) no-repeat; 
    text-decoration:none;
    

  • Solution

  • You can use a ul, with float:left on the li elements

    http://jsfiddle.net/pB7rt/2/