How can I orient divs properly within another div?

Question

I am trying to create a side bar with an animated menu button. I found an example online of the button I imagined and am trying to use it correctly but cant seem to get it where I want on my page. Why do the three divs that make up the animated button appear to the right of the trapezoid and not within it?

    #trap {
     position: absolute;
     left: 0px;
     top; 0px;
     height: 38px;
     width: 40px;
     border-left: 40px solid black; 
     border-bottom: 5px solid transparent;
     border-top: 5px solid transparent;
     margin-left: 0;
     transition: 0.5s;
    }

    .container {
        display: inline-block;
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #A4A4A4;
        margin: 6px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }

    <div id="trap" class="container" onclick="toggleNav(this)">
     <div class="bar1"></div>
     <div class="bar2"></div>
     <div class="bar3"></div>
    </div>

nvioli · Answer 1 · 2017-07-10T15:17:02.103

The #trap's border-left is pushing the bars to the right. One possible solution is to move the bars back left using position:relative.

UPDATE: the ghost-element was caused by the fact that you have both a border-width and a width on the #trap element. Because browsers' default is to not include the border's width in the width calculation, both were taken into account.

The simplest solution would be just to change width: 40px to width:0px, so that the border's width definition is the only one that's used, but my preferred situation (updated in the snippet) is to change the box-sizing property to border-box. This causes the width property to take into account the element's border width, so the two properties don't add to each other. I also had to increase the height to prevent the bottom from being clipped off.

#trap {
     position: absolute;
     left: 0px;
     top; 0px;
     height: 38px;
     width: 40px;
      box-sizing: border-box;
     border-left: 40px solid black; 
     border-bottom: 5px solid transparent;
     border-top: 5px solid transparent;
     margin-left: 0;
     transition: 0.5s;
    }

    .container {
        display: inline-block;
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #A4A4A4;
        margin: 6px 0;
        transition: 0.4s;
        left:-35px;
        position:relative;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }

<div id="trap" class="container" onclick="toggleNav(this)">
     <div class="bar1"></div>
     <div class="bar2"></div>
     <div class="bar3"></div>
    </div>

This doesn't seem to solve the issue for me, the hamburger menu button still appears to the right of the trapezoid and not inside it — Doalzer, Jul 10 '17 at 00:51
@Doalzer what browser are you using? The embedded snippet above works for me in Chrome, FF, and Safari. — nvioli, Jul 10 '17 at 01:20
JK I must've misspelled something, copy and pasted your snippet over mine and now it works. Thanks for the help! — Doalzer, Jul 10 '17 at 12:24
Because I am using the div as a button, I am still able to click where the hamburger used to show up, why is that? — Doalzer, Jul 10 '17 at 12:37

How can I orient divs properly within another div?

1 Answers1