The gap is there because the add to cart box is floated right.

The attributes are floated left but have a clear;both after them. This means that the second one is pushed down beneath all the active floats. ie beneath the add to cart box as well.

In the source code you'll see: for instance:

Code:
<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-1">Color</label></h4>
<div class="back">
<select name="id[1]" id="attrib-1">
  <option value="1">White</option>
  <option value="2">Black</option>
  <option value="3">Red</option>
  <option value="4">Blue</option>

  <option value="6">Green</option>
  <option value="7">Orange</option>
  <option value="5">Yellow</option>
  <option value="8">Silver</option>
  <option value="9">Lt. Blue</option>
</select>

</div>
<br class="clearBoth" />
It is the <br class="clearBoth" /> that is pushing them this way.

This is found in the file.: tpl_modules_attributes.php. The .back that is appearing in the code is effectively a float:left.

I am just going to go and see if I can find a post I remember about why it is a bad idea to have zen cart in a iframe like this!