Need help pinpointing the CSS causing this alignment issue

Question

I'm having a problem with this new theme I tried out with OpenCart. I've tried my best to diagnose the issue using Firebug in Firefox, but I cannot pinpoint whats the culprit here.

The problem can be seen here :

http://bit.ly/13KG6dz

(Using bit.ly because IP address are not allowed - don't worry its not a virus)

Basically in OpenCart, you can add 'Options' to your Products. OpenCart comes with some sample dummy Products. One of these Products has 9 different Options, and all of them display fine. But when I define a new Option in OpenCart, and add it to this Product, there are alignment issues, which can be seen below:

Pictured Example:

1) Initial Status:

Default Options only. Everything is fine, no alignment issues.

2) After adding a new Option:

Now I define a new Option and add it to this Product, and the alignment issues are visible:

Note that is ONLY happens when I add a new Option to an existing sample product. However, this also ONLY happens on the particular theme being used on this OpenCart installation.

If anyone can get to the bottom of this, I'll be extremely grateful!

Answer 1

YES, as I guessed it, it was an issue of floats, add this line here

 <input type="radio" id="option-value-20" value="20" name="option[228]">
 <label for="option-value-20">No</label>
 <br>
 </div>
 <div style="clear: both"></div>
           <!-- ^This will clear your floats, alternatively you can use
                  overflow: hidden; on container element -->

Right after this <div id="option-228" class="option boss_radio"> ends

Answer 2

You have float defined in your css rule boss_radio . If you remove this class your elements are aligned fine! The problem is, that this rule makes the element float with a width of just around 30%, which will let other elements stay on the same line.