add buttons between and under the mid of two div [closed]











up vote
-1
down vote

favorite












how i can add TWO buttons between two div like this?
enter image description here










share|improve this question













closed as too broad by Temani Afif, Pearly Spencer, Machavity, Makyen, sideshowbarker Nov 11 at 1:35


Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.











  • 1




    place the two buttons inside a div, and give that div a negative margin-top, ex: margin-top: -15px
    – Iulius
    Nov 10 at 21:58















up vote
-1
down vote

favorite












how i can add TWO buttons between two div like this?
enter image description here










share|improve this question













closed as too broad by Temani Afif, Pearly Spencer, Machavity, Makyen, sideshowbarker Nov 11 at 1:35


Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.











  • 1




    place the two buttons inside a div, and give that div a negative margin-top, ex: margin-top: -15px
    – Iulius
    Nov 10 at 21:58













up vote
-1
down vote

favorite









up vote
-1
down vote

favorite











how i can add TWO buttons between two div like this?
enter image description here










share|improve this question













how i can add TWO buttons between two div like this?
enter image description here







html css css3 button position






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 20:43









niccoicco9

133




133




closed as too broad by Temani Afif, Pearly Spencer, Machavity, Makyen, sideshowbarker Nov 11 at 1:35


Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.






closed as too broad by Temani Afif, Pearly Spencer, Machavity, Makyen, sideshowbarker Nov 11 at 1:35


Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.










  • 1




    place the two buttons inside a div, and give that div a negative margin-top, ex: margin-top: -15px
    – Iulius
    Nov 10 at 21:58














  • 1




    place the two buttons inside a div, and give that div a negative margin-top, ex: margin-top: -15px
    – Iulius
    Nov 10 at 21:58








1




1




place the two buttons inside a div, and give that div a negative margin-top, ex: margin-top: -15px
– Iulius
Nov 10 at 21:58




place the two buttons inside a div, and give that div a negative margin-top, ex: margin-top: -15px
– Iulius
Nov 10 at 21:58












1 Answer
1






active

oldest

votes

















up vote
2
down vote



accepted










Use negative margins. Let's say the buttons have a 30px height: apply a margin-top of -15px and a margin-bottom of -15px to the buttons container (if you want it in the middle for example)






body,html{margin: 0; padding: 0;}
.div1 {
background: tomato;
height: 100px;
}

.div2 {
background: grey;
height: 100px;
}

.buttons{
margin-top: -15px;
margin-bottom: -15px;
text-align: center;
}
button {
height: 30px;
}

<div class="div1"></div>
<div class="buttons">
<button>button 1</button>
<button>button 2</button>
</div>
<div class="div2"></div>








share|improve this answer




























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    2
    down vote



    accepted










    Use negative margins. Let's say the buttons have a 30px height: apply a margin-top of -15px and a margin-bottom of -15px to the buttons container (if you want it in the middle for example)






    body,html{margin: 0; padding: 0;}
    .div1 {
    background: tomato;
    height: 100px;
    }

    .div2 {
    background: grey;
    height: 100px;
    }

    .buttons{
    margin-top: -15px;
    margin-bottom: -15px;
    text-align: center;
    }
    button {
    height: 30px;
    }

    <div class="div1"></div>
    <div class="buttons">
    <button>button 1</button>
    <button>button 2</button>
    </div>
    <div class="div2"></div>








    share|improve this answer

























      up vote
      2
      down vote



      accepted










      Use negative margins. Let's say the buttons have a 30px height: apply a margin-top of -15px and a margin-bottom of -15px to the buttons container (if you want it in the middle for example)






      body,html{margin: 0; padding: 0;}
      .div1 {
      background: tomato;
      height: 100px;
      }

      .div2 {
      background: grey;
      height: 100px;
      }

      .buttons{
      margin-top: -15px;
      margin-bottom: -15px;
      text-align: center;
      }
      button {
      height: 30px;
      }

      <div class="div1"></div>
      <div class="buttons">
      <button>button 1</button>
      <button>button 2</button>
      </div>
      <div class="div2"></div>








      share|improve this answer























        up vote
        2
        down vote



        accepted







        up vote
        2
        down vote



        accepted






        Use negative margins. Let's say the buttons have a 30px height: apply a margin-top of -15px and a margin-bottom of -15px to the buttons container (if you want it in the middle for example)






        body,html{margin: 0; padding: 0;}
        .div1 {
        background: tomato;
        height: 100px;
        }

        .div2 {
        background: grey;
        height: 100px;
        }

        .buttons{
        margin-top: -15px;
        margin-bottom: -15px;
        text-align: center;
        }
        button {
        height: 30px;
        }

        <div class="div1"></div>
        <div class="buttons">
        <button>button 1</button>
        <button>button 2</button>
        </div>
        <div class="div2"></div>








        share|improve this answer












        Use negative margins. Let's say the buttons have a 30px height: apply a margin-top of -15px and a margin-bottom of -15px to the buttons container (if you want it in the middle for example)






        body,html{margin: 0; padding: 0;}
        .div1 {
        background: tomato;
        height: 100px;
        }

        .div2 {
        background: grey;
        height: 100px;
        }

        .buttons{
        margin-top: -15px;
        margin-bottom: -15px;
        text-align: center;
        }
        button {
        height: 30px;
        }

        <div class="div1"></div>
        <div class="buttons">
        <button>button 1</button>
        <button>button 2</button>
        </div>
        <div class="div2"></div>








        body,html{margin: 0; padding: 0;}
        .div1 {
        background: tomato;
        height: 100px;
        }

        .div2 {
        background: grey;
        height: 100px;
        }

        .buttons{
        margin-top: -15px;
        margin-bottom: -15px;
        text-align: center;
        }
        button {
        height: 30px;
        }

        <div class="div1"></div>
        <div class="buttons">
        <button>button 1</button>
        <button>button 2</button>
        </div>
        <div class="div2"></div>





        body,html{margin: 0; padding: 0;}
        .div1 {
        background: tomato;
        height: 100px;
        }

        .div2 {
        background: grey;
        height: 100px;
        }

        .buttons{
        margin-top: -15px;
        margin-bottom: -15px;
        text-align: center;
        }
        button {
        height: 30px;
        }

        <div class="div1"></div>
        <div class="buttons">
        <button>button 1</button>
        <button>button 2</button>
        </div>
        <div class="div2"></div>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 10 at 22:06









        Iulius

        563312




        563312















            Popular posts from this blog

            Florida Star v. B. J. F.

            Error while running script in elastic search , gateway timeout

            Adding quotations to stringified JSON object values