How to overlay/overlap two div's designed with css to look like text bubbles?

Question

My main problem is how can I get the foreground bubble (in blue) to be slightly below and to the right of the background bubble under all conditions?

I've tried playing around with different ways of overlapping objects on top of each other... specifically using the following ways:

1. Playing around with negative margins
2. Absolute/Relative positioning and z-index

However, I'm not able to get one combination which works under "all conditions" and keeps the text bubble "whole." (see note below)

Specifically, the conditions I'm facing are:

1. Different Text Lengths --- The text which currently written in as "Some Title" is automatically generated and could very in size (i.e. number of characters) so the bubbles need to adjust to be a different number of lines (1-5).
2. Differing Browser Sizes --- I want the text bubbles to adjust in response to the size of the browser, but not the distance between them.

Also note:

• I'm using the latest version of Twitter Bootstrap.
• I use specific before/after psuedo elements on the text bubbles so their little tips are placed in what appears to be okay location aesthetically. These would often get screwed up when I tried the second method above to solve the problem.

Bonus points if you can make the tips on the text bubbles look better ;)

Here's my html:

           <div>
              <div id="head-names">
                <h2>
                  Person A
                </h2>
                <h2>
                  Person B
                </h2>
              </div>
              <div align="center">
                    <h2 class="text-bubble background-bubble">
                      <p>Some Title</p>
                     </h2>
                    <h2 class="text-bubble foreground-bubble">
                      <p>Some Title</p>
                    </h2>
              </div>
          </div>

And my css:

           #head-names {
                display:flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap:wrap;
            }

            .text-bubble {
                position:relative;
                text-align : center;    
                border-radius:30px;
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                -webkit-box-shadow: 2px 2px 4px #888;
                -moz-box-shadow: 2px 2px 4px #888;
                box-shadow: 2px 2px 4px #888;
                max-width:650px;
                padding: 10px 20px;
                margin: 0 0 20px;
            }


            .text-bubble:before {
                content:"";
                position:absolute;
                width: 0;
                height:0;    
                border-style:solid;
            }


            .text-bubble:after {
                content:"";
                position:absolute;
                border-style:solid;    
                display:block;
                width: 0;
            }

            .foreground-bubble {
                background-color: #ADD8E6;
                border: 6px solid #666;
                left:2%;   
            }

            .foreground-bubble:before {
                bottom:100%;
                left:13%;
                border-color: transparent transparent #666 #666;
                border-width: 30px 30px 30px 30px;
            }


            .foreground-bubble:after {
                bottom:100%;
                left:15%;
                border-color: transparent transparent #ADD8E6 #ADD8E6;
                border-width: 18px 18px 18px 18px;    
            }

            .background-bubble {
                background-color: #fff;
                border: 6px solid #666;
                left:-2%;
                color:transparent;
                margin-bottom:-17%;
            }

            .background-bubble:before {
                bottom:100%;
                left:80%;
                border-color: transparent #666 #666 transparent;
                border-width: 30px 30px 30px 30px;
            }

            .background-bubble:after {
                bottom:100%;
                left:82.5%;
                border-color: transparent #fff #fff transparent;
                border-width: 18px 18px 18px 18px;    

My code can be found here: http://jsfiddle.net/aZ6bE/

Link to some wireframes/sample images of how I'd ideally like it to scale: http://ge.tt/2puJ7Hh1/v/0?c

Answer 1

For the positioning I removed the .background-bubble margin-bottom:-17% and instead added top:-100px to .foreground-bubble since its position:relative. I also gave the wrapping div a new class "bubbles" and added margin-top:50px to move it a bit further down so the tips don't collide with the text.

According the tips of the bubbles I changed:

• the size (border-width) of the bigger triangle
• percentage -> pixels
• (background-bubble) left -> right

Here's the JSFiddle

I would also suggest you combine some of the CSS into new classes to reduce the redundancy. e.g the border-width and bottom:100% of the tips.