CODEWITHSUNDEEP
htmlcss
Clawish
Clawish

Reputation: 2964

Div bound to other div when browser window size changes

I have the following problem: enter image description here

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

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 produces the above output. What can I do to make it work? Please no jQuery solutions, since I use Angular.

Edit: If you omit the text-align: center, the code will achieve the desired effect. But not quite: I want to have the buttons centered! And still have the mentioned effect! How would I do that?

Upvotes: 5

Views: 265

Answers (2)

Clawish
Clawish

Reputation: 2964

Managed to do it without much hackiness. Change .container2 to

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

see this fiddle.

Upvotes: 1

Oz87
Oz87

Reputation: 1

did you mean something like this?

JSFiddle

Also with position absolute you don't have to 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 position an element absolute to it's parent element, the parent element also needs a position defined e.g.: position: relative;. If not, the absolute postioned element will look for the closest parent that has a position set other than the default value. Hope this helps.

Upvotes: 0

Related Questions