float div next to div

Question

http://dev.dealercontrol.net/dealercontrol/index_comp1.html

on this page I am trying to float a flag to the left of the subtitle

<div>
              <div class="flag certified">Certified</div>
              <div class="subtitle left">Deal On 09 Black Lamborghini LP560</div>
            </div>

I can't seem to get the flag to layout properly what would be the best method to do so? also how can I set the height of the flag to wrap tight on the text inside of it?

Answer 1

Put the flag inside the div and float it to the left

<div>   
  <div class="subtitle left">
    <div class="flag certified" style="float: right">Certified</div>
    Deal On 09 Black Lamborghini LP560   
  </div>
</div>

Answer 2

Good lord man.

You have soooooo much CSS going on on that page it's no wonder you're tying yourself in knots. Just look at the huge stack of inherited and overridden styles on any element with firebug.

First off a simple float:left will do the trick but it will only work if the two elements have a combined width narrower than their parent container - otherwise what else can happen but it wraps?

Secondly, your code above isn't actually what's on the page. Too many container divs getting in the way - simplify and move the two required elements as sibling nodes of the same parent and give both float:left.

Thirdly, reduce your bloat! .clear classes are pure bloat (see here). You really don't need more than 2 CSS files (a global base and a page extension) so condense and merge your files. Cut out as much of the tag selector styles as you can (this is what creates all the inherited/ignored stacks which are getting you into an unmaintainable hard to decipher position). Hopefully at that point you have a working design and a lighter more responsive page you can debug more easily in future.