Div binds to another div when resizing the browser window

Question

I have the following problem:

the speech bubble should always point to the eye, regardless of the size of the browser window.

Jsfiddle here

So far I have the following code:

<div class="container1"> <div class="container2"> <button class="eye"></button> <div class="speech-bubble">View</div> </div> </div> 

Where

 .container1 { text-align: center; display: -webkit-box; display: -webkit-flex; width: 100%; } .container1 > .container2 { -webkit-box-flex: 1; -webkit-flex: 1;} .speech-bubble { position: absolute;} 

But this does not work and gives the above output. What can I do to make it work? No jQuery solutions since I use Angular.

Change If you omit text-align: center , the code will achieve the desired effect. But not really: I want the buttons centered! And there is still the effect mentioned! How can I do it?

Answer 1

I managed to do this without much hacking. Change .container2 to

 .container1 > .container2 { margin: 0 auto; } 

see this script .

Answer 2

Did you mean something like this?

Jsfiddle

Also with absolute position you should not use left: (x amount)px or %; . In some cases, it is easier to use right: (x amount)px or %; . By the way, if you want to place an elementary element in its parent element, the parent element also needs a certain position, for example: position: relative; . If not, an element with an absolute position will look for the closest parent who has a different position than the default. Hope this helps.