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?
html css css3 button position
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.
add a comment |
up vote
-1
down vote
favorite
how i can add TWO buttons between two div like this?
html css css3 button position
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
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
how i can add TWO buttons between two div like this?
html css css3 button position
how i can add TWO buttons between two div like this?
html css css3 button position
html css css3 button position
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
add a comment |
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
add a comment |
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>
add a comment |
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>
add a comment |
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>
add a comment |
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>
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>
answered Nov 10 at 22:06
Iulius
563312
563312
add a comment |
add a comment |
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