title: css clear: both; won't work with position: absolute
body: <p>I have html setup where one of the elements needs to have <code>position: absolute;</code> so that the future children can be absolutely positioned. Positioning of the children seems to work file with <code>position: absolute;</code> But for some reason, the image that should appear right below the title appears to the right of the title. I have spent a few hours pondering this. I have also tried adding <code>position: relative;</code> to the div with <code>hot_spot_item</code> as class, but that wasn't fruitful. If you remove the <code>position: absolute;</code> on <code>.hot-spot-wrapper</code> you'll notice that image aligns right below the title, but that messes with the absolute positioning of the children. </p>
  
  <p>Any help is appreaciated.</p>
  
  <p><a href="http://jsbin.com/ocetas/1/edit" rel="nofollow">http://jsbin.com/ocetas/1/edit</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong>@jkinz</strong> thanks for the detailed reply. Your solution would work, if I could figure out that the title and the map are together and they both have same alightment. The problem is a bit more complex merely because of the way they do things here.</p>
  
  <ul>
  <li>HTML is built on the server side based on an XML configuration that the business folks use to author the page. </li>
  <li>This xml configuration treats the title and the map as two separate entities.</li>
  <li>This xml configuration is parsed on the server side item by item and put through a freemarker template that generates html for that particular item. </li>
  <li>Ergo, the html for the title is generated separately from the html for the map making my life miserable.</li>
  <li>This is one of many things business authors can do with the xml configuration. </li>
  <li>Therefore you can see that if It would be hard for me to detect that this is the kind of xml definition they put in place and wrap the title and the map together so I can align them. </li>
  <li>Also, they can individually control the horizontal alignment of the title and map. </li>
  </ul>
  
  <p>P.S. I am in a classic case of "design production detachment syndrome". For the longest time I thought this wasn't possible in Software Industry. The architects designed and implemented the entire backend in a shop that has no experience in developing web-based products without having a UI developer on board for two years and then they brought me in for doing the UI and they don't want me complaining how crappy a method  that is to develop software.  Anyway thanks for your help.</p>