I have the following css :
img { border-style : none }
a { text-decoration : none }
#header { width : 100%}
#header #topbar{width:705px;
padding:3px 10px 0 10px;
float:left;
height:30px;
line-height:22px;
background-color:#eee;
max-width:750px;
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-radius-bottom-left:3px;
-webkit-border-radius-bottom-right:3px;
}
#header #logo { height : 61px;
width : 250px;
float : left;
}
/* BUTTONS */
.buttons a, .buttons button{
display:block;
float:right;
margin:0 7px 0 0;
background-color:#E0EEEE;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
with the html code:
<body>
<div id="header">
<div id="topbar">
<div id="logo">
<a href="" >
<img src="images/logo-temp.png">
</a>
</div>
<div id= "buttons">
<div class="buttons">
<a href="/password/reset/" class="positive">
<img src="icons/arrow_up.png" alt=""/>
Send
</a>
<a href="/password/reset/" class="positive">
<img src="icons/arrow_down.png" alt=""/>
Receive
</a>
<a href="#" class="positive">
<img src="icons/user.png" alt=""/>
Users
</a>
</div>
</div>
</div>
Problem: Right now the logo is floating left however the 3 buttons floating right but also horizontally aligned to the top. How do I fix this so all buttons are aligned to the bottom with the logo on the same line?