CODEWITHSUNDEEP
htmlcss
Fergoso
Fergoso

Reputation: 1582

Prevent buttons overlapping

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:

enter image description here

Upvotes: 0

Views: 17577

Answers (7)

ekans
ekans

Reputation: 1714

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/

Upvotes: 1

sasi
sasi

Reputation: 534

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;
}

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

Remove this from your css: Demo

.itmHolder :nth-child(2) , .itmHolder :nth-child(3){
    position: absolute;
    top:0;
}

Upvotes: 0

Danish Khan
Danish Khan

Reputation: 143

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.

Upvotes: 0

raju
raju

Reputation: 392

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 ).

Upvotes: 0

Mehdi Brillaud
Mehdi Brillaud

Reputation: 1866

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>

Upvotes: 0

smnbbrv
smnbbrv

Reputation: 24541

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

Upvotes: 1

Related Questions