CODEWITHSUNDEEP
htmlcss
phill
phill

Reputation: 13844

css : buttons float to the top. How do I align them horizontally?

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?

Upvotes: 2

Views: 6211

Answers (2)

Emily
Emily

Reputation: 10088

Add a margin to the button class to push the buttons down. 

.buttons {margin-top:30px;}

Edit after comment

You want to add the margin to the <div class="buttons">

Put it right above .buttons a in the css. 

/* BUTTONS */
.buttons {margin-top:30px;}
.buttons a, .buttons button{
...
}

Upvotes: 1

Ian Elliott
Ian Elliott

Reputation: 7686

#header #logo 
{ 
  height : 61px; 
  width : 100%; 
  float : left;                                                           
}

There's also an error in your CSS where you terminate the brackets twice after this declaration.

Reasoning: Currently you're floating the #header #logo to the left but it doesn't fill it the width of its parent container, leaving space available on the right hand side. When you float the buttons they fall into this free space, so you need to fill it by increasing the left float to the full width.

JSBin, working demo.

Upvotes: 0

Related Questions