# \[CSS\] Dynamically Expanding Balloon window a la Google Maps

**URL:** <https://forum.kirupa.com/t/css-dynamically-expanding-balloon-window-a-la-google-maps/181159>\
**Category:** web dev\
**Created:** [March 6, 2006, 11:35pm UTC](https://forum.kirupa.com/t/css-dynamically-expanding-balloon-window-a-la-google-maps/181159 "2006-03-06T23:35:49Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![oceans11](https://avatars.discourse-cdn.com/v4/letter/o/a9a28c/32.png) [@oceans11](https://forum.kirupa.com/u/oceans11)\
**Post date:** [March 6, 2006, 11:35pm UTC](https://forum.kirupa.com/t/css-dynamically-expanding-balloon-window-a-la-google-maps/181159/1 "2006-03-06T23:35:49Z")

</div>

Hi I’ve been wanting to do a balloon info window using div’s but i’m having trouble splitting it. I know that I basically just have to set the first portion as background image and the tail inside another div, this div in turn inside the main div?? Where do i begin the image splitting, the tail and the body…  
I was thinking also maybe append the image inside the div instead? But I don’t think it’s a good idea.

Here’s a visual representation  
[center] ![](http://i2.tinypic.com/qx4cqv.gif)[/center]

or should i have a div for the top (rounded corners), and the bottom(tail and rounded corners), and the middle is the one repeating? I’m quite at a loss how to weave it in css. ☹

Thanks in advance guys