Prevent buttons overlapping - html

Question

This is my div structure. I'm having difficulties achieving the following.
How can I make all 3 buttons (Sub 1, Sub 2, Sub 3) visible and make the height of DIV 1 to the height of its children buttons?
Fiddle
html:
.sub {
position: relative;
background-color: lime;
}
.itmHolder {
position: relative;
}
.Buttons {
display: inline-block;
padding: 12px 8px;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 15px;
position: relative;
text-align: center;
}
<div class="og">
<div class="itmHolder">
<div class="sub">DIV 1</div>
<div class="sub">DIV 2</div>
<div class="sub">
<button type="button" class="Buttons">Sub 1</button>
<button type="button" class="Buttons">Sub 2</button>
<button type="button" class="Buttons">Sub 3</button>
</div>
</div>
<div class="itmHolder">
<button type="button" class="normalBtn">Button</button>
</div>
</div>
Expected output:

Answer 1

well I removed obsolete elements and css definitions and now it looks exactly like the image:
.sub {
position: relative;
background-color: lime;
overflow: hidden;
}
.itmHolder {
position: relative;
}
.Buttons {
display: inline-block;
padding: 12px 8px;
}
.og {
margin-top: 15px;
position: relative;
text-align: center;
}
<div class="row">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Buttons">Sub 1</button>
<button type="button" class="Buttons">Sub 2</button>
<button type="button" class="Buttons">Sub 3</button>
</div>
</div>
<div class="itmHolder">
<button type="button" class="normalBtn">Button</button>
</div>
</div>
</div>
fiddle

Answer 2

You just have to change your css a little:
.Buttons{
display: inline-block;
padding: 1px 8px;
height: 100%;
line-height: 100%;
}
.itmHolder > :nth-child(2) , .itmHolder > :nth-child(3){
position: absolute;
top:0;
width: 100%;
}
https://jsfiddle.net/t5au23ra/7/

Answer 3

I would have made somethin like that
.wrapper {
width: 500px;
text-align: center;
margin: 0 auto;
}
.subs {
background-color: green;
}
.subs button {
height: 30px;
}
<div class="wrapper">
<div class="subs">
<button>Sub1</button>
<button>Sub2</button>
<button>Sub3</button>
</div>
<button>Button</button>
</div>

Answer 4

Your problem and your markup is not understandable. Don't know why you have used pos:abs property. If you want as in your figure then, you don't need that much codes. Look at this fiddle .
HTML
<div class="make-center">
<div class="sub">
<button type="button" class="Buttons">Sub 1</button>
<button type="button" class="Buttons">Sub 2</button>
<button type="button" class="Buttons">Sub 3</button>
</div>
<button type="button" class="normalBtn">Button</button>
</div>
CSS
.make-center {
text-align: center;
padding: 20px 0;
}
.sub {
background: lime;
}
.normalBtn,
.Buttons {
padding: 10px;
border: 1px solid gray;
}
The spacing between buttons are because of default button border ( browser's default rendering ).

Answer 5

i hope you want like this type of menu
<ul class="itmHolder">
<li>DIV 1</li>
<li>DIV 2
<ul class="sub">
<li> <button type="button" class="Buttons">Sub 1</button></li>
<li> <button type="button" class="Buttons">Sub 2</button></li><li>
<button type="button" class="Buttons">Sub 3</button></li>
<button type="button" class="normalBtn">Button</button>
</ul>
</li>
</ul>
css
.itmHolder{ margin:0; padding:0;}
.itmHolder li{ display:inline-block; position:relative;}
.itmHolder li .sub{display:none; height:50px; background:lime; width:100%; position:absolute; width:500px;}
.itmHolder li:hover .sub {display:block;}
.itmHolder li:hover .sub button{height:50px; margin:0 2px;}
.normalBtn{top:50px;margin-left:250px;position:absolute}
use this.

Answer 6

Remove this from your css: Demo
.itmHolder :nth-child(2) , .itmHolder :nth-child(3){
position: absolute;
top:0;
}

Answer 7

As per your expected output. This could help you.
HTML
<div>
<div class="parent">
<button>SUB1</button>
<button>SUB2</button>
<button>SUB3</button>
</div>
<div>
<button>Button</button>
</div>
</div>
CSS
.parent {
background-color: lime;
}
div{
text-align: center;
}
.parent button{
margin: 0;
padding:0;
height: 55px;
width: 50px;
}