I aligned 2 buttons side by side but now my background is gone

Question

I know this may be a simple question but I've got a hard time figuring it out

I tried to align 2 buttons side by side, I've tried to add the float: left, it works but then the background moves over the buttons like this

http://jsfiddle.net/nc00a48y/5/

HTML

<body>
<div class="container">
    <div class="message">
        <a id="button" href="#">Yes, Right now</a>
        <a id="button2" href="#">No, Not now</a>

    </div>
</div>
</body>

CSS

html {height:100%; font-size:62.5%; font-family:  'Roboto', sans-serif, Arial;}
body {background: #222; font-size:1.6rem;}
.container {
    background-color: #fff;
    border-radius: 0.3rem;
    width: 94%;
    margin: auto;
    -webkit-box-shadow: 2px 2px 7px #000;
    -moz-box-shadow: 2px 2px 7px #000;
}

body {
    font-family: Arial;
}

#button {
    -moz-box-shadow:inset 0 1px 0 0 #caefab;
    -webkit-box-shadow:inset 0 1px 0 0 #caefab;
    box-shadow:inset 0 1px 0 0 #caefab;
    background:0;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a',endColorstr='#5cb811');
    background-color:#77d42a;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #268a16;
    display:block;
    color:#fff;
    font-size:2.5rem;
    font-weight:700;
    font-style:normal;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0 #666;
    margin:1.5rem 0;
    padding:6%;
    float: left;
}

#button2 {
    -moz-box-shadow:inset 0 1px 0 0 #EBEBEB;
    -webkit-box-shadow:inset 0 1px 0 0 #EBEBEB;
    box-shadow:inset 0 1px 0 0 #EBEBEB;
    background:0;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C7C7C7',endColorstr='#C7C7C7');
    background-color:#C7C7C7;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #969696;
    display:block;
    color:#fff;
    font-size:2.5rem;
    font-weight:700;
    font-style:normal;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0 #666;
    margin:1.5rem 0;
    padding:6%;
    float: right;
}


h1 {text-align: center;font-size: 1.8rem; margin-bottom: 0.3rem; font-weight: bold;}
span { color: orange;}



@-webkit-keyframes deplete {
    0%  { 
        width: 75%;
        background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
        background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
        background: -o-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
        background: -ms-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
        background: linear-gradient(to bottom,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 );
    }
    50% {
        background: #fceabb;
        background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
        background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
        background: -o-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
        background: -ms-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
        background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 );
    }
    70% {
        background: #f85032;
        background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));
        background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );
    }
    100% {width: 3%;
        background: #f85032;
        background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));
        background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );
    }
}


@-webkit-keyframes batt-text {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

@media only screen and (-webkit-device-pixel-ratio: .75) {
  /* CSS for Low-density Android screens goes here *
   * Ex: HTC Evo, HTC Incredible, Nexus One */
}
@media only screen and (-webkit-device-pixel-ratio: 1) and (max-device-width: 768px) {

}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {
  /* CSS for High-density Android screens goes here *
   * Ex: Samsung Galaxy SII, HTC Nexus One, HTC Evo 3D */
}

@media only screen and (-webkit-device-pixel-ratio: 2) {
  /* CSS for Ultra-high-density (Retina) Android screens goes here *
   * Ex: Samsung Galaxy SIII, HTC Evo LTE, Samsung Galaxy Nexus */
}
@media only screen and (orientation:landscape) {
    .container {max-width: 60rem;}
    #button {font-size: 3rem;}
    #button2 {font-size: 3rem;}
}

What you mean 'the background moves over the buttons' ? – Alex Char Aug 26 '14 at 14:58 — Alex Char, Aug 26 '14 at 14:58
I don't see the problem, tbh.. – Bokdem Aug 26 '14 at 14:59 — Bokdem, Aug 26 '14 at 14:59
Did you forget to clear the floats? – Paulie_D Aug 26 '14 at 14:59 — Paulie_D, Aug 26 '14 at 14:59

score 0 · Answer 1 · answered Aug 26 '14 at 14:59

0

You will have to clear the floats after the last button :

div.message:after {
    content: '';
    display: block;
    clear: both;
}

demo

answered Aug 26 '14 at 14:59

Brewal

8,067
2
24
37

score -1 · Answer 2 · edited May 23 '17 at 11:49

Add

.container {
       display: inline-block;
}

When you contain floated elements you have two options: float the container or turn it an inline-block element.

UPDATE: You have 3 options: add overflow: auto;

Already answered in Containing floated elements

UPDATE:

...other answers here may work also...err...

“No one expects the Spanish Inquisition! Our chief weapon is surprise, fear and surprise; two chief weapons, fear, surprise, and ruthless efficiency! Er, among our chief weapons are: fear, surprise, ruthless efficiency, and near fanatical devotion to the Pope! Um, I'll come in again...”

I aligned 2 buttons side by side but now my background is gone

2 Answers2