CODEWITHSUNDEEP
htmlcss
J-LO
J-LO

Reputation: 229

How would I stack two form buttons on top of each other in my header?

I'm trying to stack two form buttons on top of each other in my header. I have the following code for html:

<header class="global-header">

            <img class="logo" src="http://placehold.it/100x100" alt="logo" />    

        <div class="signup">
             <a href="#">
                    <div class="button"></div>
                    <div class="button"></div>
        </a>
    </div>

and the following css:

.global-header {
    overflow: hidden; 
}

.logo {
    margin-left: 200px;
    display: block;  
    float:left;
}
.button{
    border: 1px solid black;
    height: 25px;
    width: 100px;
    background-color: yellow;
    float:right;    
}
.button2{

    border: 1px solid black;
    height: 25px;
    width: 100px;
    background-color: red;
    float: right;
}

However the buttons seem to stack on top of each other rather than one above and one below. Here's a picture of what I'm trying to accomplish.

example

Upvotes: 0

Views: 1779

Answers (2)

NoobEditor
NoobEditor

Reputation: 15881

Fiddle : http://jsfiddle.net/logintomyk/7VXV2/

Whats causing it : Since yo have assigned float to buttons, they will appear in same line. Ammemdement : Remove float from button and assign it to signup class instead

CSS

.signup{float:right}
.button{
    border: 1px solid black;
    height: 25px;
    width: 100px;
    background-color: yellow;
}

Upvotes: 1

Kishori
Kishori

Reputation: 1095

You can try using property clear:left to class .button

Below is the CSS

.button {
    background-color: #FFFF00;
    border: 1px solid #000000;
    clear: right;
    float: right;
    height: 25px;
    width: 100px;
}

Upvotes: 0

Related Questions