Why my menu is not aligning? - html

Question

I'm trying to create in HTML/CSS the following menu inside of a sidebar:
myimage http://img1.firenex.net/9Z0eupHnvV7LIPQd950r.png
Every button has its own corresponding pressed/non-pressed image, and when hovered its opacity moves from 0.8 to 1.0 via CSS.
The problem is that I get is this:
myimage2 http://img1.firenex.net/nooUcfe0HvvfMaCmz6N8.png
Not quite the result I expected :)
This is my HTML:
<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div id="emailBtn"></div>
This is my CSS:
#homepageBtn {
background:url(img/buttons/homepage_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
float: left;
}
#homepageBtn:hover {
background:url(img/buttons/homepage_btn.png) no-repeat;
opacity: 1.0;
}
#homepageBtn:active {
background:url(img/buttons/homepage_btn_pressed.png) bottom right no-repeat;
}
#progressiBtn {
background:url(img/buttons/progressi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 10px;
float: left;
}
#progressiBtn:hover {
background:url(img/buttons/progressi_btn.png) no-repeat;
opacity: 1.0;
}
#progressiBtn:active {
background:url(img/buttons/progressi_btn_pressed.png) bottom right no-repeat;
}
#interessiBtn {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
margin-top: 10px;
clear: left;
float: left;
}
#interessiBtn:hover {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 1.0;
}
#interessiBtn:active {
background:url(img/buttons/interessi_btn_pressed.png) bottom right no-repeat;
}
#friendzoneBtn {
background:url(img/buttons/friendzone_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 10px;
margin-top: 10px;
float: left;
}
#friendzoneBtn:hover {
background:url(img/buttons/friendzone_btn.png) no-repeat;
opacity: 1.0;
}
#friendzoneBtn:active {
background:url(img/buttons/friendzone_btn_pressed.png) bottom right no-repeat;
}
#emailBtn {
background:url(img/buttons/email_btn.png) no-repeat;
opacity: 0.8;
width: 188px;
height: 29px;
margin-left: 30px;
margin-top: 10px;
clear: left;
}
#emailBtn:hover {
background:url(img/buttons/email_btn.png) no-repeat;
opacity: 1.0;
}
#emailBtn:active {
background:url(img/buttons/email_btn_pressed.png) bottom right no-repeat;
}
I really don't know if I am using the correct method to do this, I would appreciate any solutions at this point... thanks in advance.
PS: this happens with Chrome, with IE for example I get it showed correctly

Answer 1

You are using clear property incorrectly. you can use this code.
<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="emailBtn"></div>​
And Remove Clear:left from following CSS
#interessiBtn {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
margin-top: 10px;
clear: left; <-- Remove this
float: left;
}
Demo Code

Answer 2

margin-top:.. or padding top but even a better solution is that do the following amendment ,
Add a new and do it like this
<div id="upper">//further divide it in two parts
<div id="homepageBtn"></div>//here goes homepage button
<div id="progressiBtn"></div>
</div > //end of upper
and do same thing for bottom Div
<div id="bottom">//further divide it in two parts
<div id="friendzoneBtn"></div>
<div id="emailBtn"></div>
</div > // end of bottom
and not whatever the dimensions you set for upper div or then bottom div your content will be easily adjustable there