February 28, 2013

making a span behave like a button

Question by Nick Ginanto

I have the following html

<div class="btns">

<div id="green">    <span class="btn btn-block btn-large btn-success disabled green_btn">Green</span>

 <div class="num">(1)</div>
</div>
<div id="red">
    <form class="button_to" >
        <div>
            <input class="btn btn-block btn-large btn-danger red_btn"
            type="submit" value="Red">
        </div>
    </form>
    <div class="num">(0)</div>
</div>
</div>

and css

.btns {
    position: relative;
}

.num {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#green, #red {
    display: inline-block;
    width: 49%;
    position: relative;
}

.green_btn, .red_btn {
    margin-bottom: 4px;
}

I can’t figure out why the (1) under green span isn’t behaving like (0) under the red button. If I remove bottom:0; it fixes the green but messes up red.

Here is a jsfiddle to illustrate the problem http://jsfiddle.net/HajHV/

What am I missing here?

Answer by ethagnawl

It’s because of the form’s margin.

margin: 0 0 20px;

Answer by Starx

Basically is the problem of form’s margin. I removed your CSS and simply added this:

form { margin: 0; }
#green, #red {
    width: 48%;
    float:left;
    position: relative;
}
.num { margin: 0 auto; width: 10px; }

Fixed

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!