How to position a callout/speech bubble box inline

Question

I am using this CSS speech-bubble generator to make a callout box on the righthand side of a page (with the speech/callout triangle on the left side of the box) http://html-generator.weebly.com/css-speech-bubble-generator.html

I need it to be positioned to the right of another < div >, but nothing I have tried will make it act the way I need. When I position it as fixed, of course it scrolls up and down the page, which is no good. When I float it right it is not close enough to the < div > on the left (unless the window is small enough). I'm thinking positioning it inline will be the best bet, but when I change the position from relative to inline the triangle part of the callout disappears. Any solutions to fix this?

Attention

.bubble {
position: relative;
width: 200px;
height: 310px;
padding: 14px;
background: #FFFFFF;
border: #cfcfcb solid 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.bubble:after {
content: "";
position: absolute;
top: 16px;
left: -39px;
border-style: solid;
border-width: 16px 39px 16px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
}

.bubble:before {
content: "";
position: absolute;
top: 13px;
left: -46px;
border-style: solid;
border-width: 19px 42px 19px 0;
border-color: transparent #cfcfcb;
display: block;
width: 0;
z-index: 0;
}

Answer 1

Found the solution--I finally changed the position to "absolute" instead and everything's working perfectly!