CODEWITHSUNDEEP
csshtmlcss-floatpositionblock
Terence Cluttey
Terence Cluttey

Reputation: 11

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;

    Upvotes: 0

    Views: 4184

    • Answers (5)

    Terence Cluttey
    Terence Cluttey

    Reputation: 11

    I have figured out the best way to do it on my own and totally forgot that i asked this question on this forum. 

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

    Is the way i had the HTML, i just typed it wrong in the question.

    I know now to do my CSS like this

    ul#list li {
   float:left;
...etc.
}

    and then style the button

    ul#list li a {
display:block;
...etc
}

    with the hover on the li:

    ul#list li:hover a {
}

    Upvotes: 0

    mkk
    mkk

    Reputation: 7693

    Your HTML is wrong. You have

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

    instead of 

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

    btw: you can delete display: inline, because float: left makes it block anyway.

    Here is jsfiddle with your version: Your version
    And here is jsfiddle with ul instead of div: Correct version

    Upvotes: 1

    Arianne
    Arianne

    Reputation: 507

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

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

    Upvotes: 1

    Adam
    Adam

    Reputation: 88

    Have a look at http://css-tricks.com/prevent-menu-stepdown/

    You say you've tried display: inline-block; and display: block;

    But not display: inline;

    Upvotes: 1

    Mihkel Viilveer
    Mihkel Viilveer

    Reputation: 432

    Try display:inline-block;

    http://jsfiddle.net/VkHVd/

    Upvotes: 2

    Related Questions