title: HTML speechbubble markup
body: <p>fyi: i'm working on a HTML markup for some speechbubbles.<br>
  The reason for this complex markup is that the speechbubble should grow with its content.</p>
  
  <p>So, first of all here my recent markup:</p>
  
  <pre><code>&lt;div class="speachbubble"&gt;
  &lt;div class="topbar"&gt;
      &lt;div class="corner top-left"&gt;&lt;/div&gt;
              &lt;div class="top"&gt;&lt;/div&gt;
              &lt;div class="corner top-right"&gt;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="middlebar"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
              &lt;div class="content"&gt;HERE iS SOME TEXT&lt;/div&gt;
              &lt;div class="right"&gt;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="bottombar"&gt;
      &lt;div class="corner bottom-left"&gt;&lt;/div&gt;
              &lt;div class="bottom"&gt;&lt;/div&gt;
              &lt;div class="corner bottom-right"&gt;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><img src="https://i.stack.imgur.com/cXj7P.png" alt="Left Complete - Right Splitted"></p>
  
  <p>In the picture ive uploaded you can see on the left side the whole speachbubble. The right side shows the splitted graphic. <strong>So the content in the speachbubble stay dynamicaly in its length.</strong></p>
  
  <p>I'm very bad in complex CSS things, maybe someone can help me? :( 
  BIG BIG THANKS!</p>
  
  <p>PS: All that should be written WITHOUT CSS3!</p>