I have been tasked to code the following inner page:
At this point, I have only uploaded it as an image.
I attempted to use divs but encountered difficulties with the side balloons.
I have included the images that have been cropped along with the code.
The issue arises when the text within the XXX div needs to expand the containing div by its length, and I would like to position it a few pixels above so that it starts in the current position...
<div>
<div style="background-image: url('fairy-party-top.png'); width: 678px; height: 141px;"></div>
<div style="background-image: url('fairy-party-body-top.png'); width: 677px; height: 45px;"></div>
<div style="background-image: url('fairy-party-body-middle.png'); width: 650px; height: 100px; background-repeat: repeat-y;">
<p style="display: inline-block; padding-top: 10px;">sdasdasasd</p>
</div>
<div style="background-image: url('fairy-party-body-bottom.png'); width: 667px; height: 225px;"></div>
</div>