Un-invited whitespace

In the early stages of development of our brand-spanking-new Seaside portal for an existing family of products the stars have aligned in a way that forces me into doing visual design aspects of it. The idea is that we’ll keep it basic while implementing various pieces of the puzzle to better understand the kinds of issues and interactions we need to deal with before handing it off to somebody who knows this stuff. What this also means, is that I end up banging my head against the desk more often that I am usually comfortable with. Here’s one example, if anyone knows the stuff, any pointers would be greatly appreciated.

Here’s a small snippet of HTML that I use to lay out two fieldsets in a single form. The idea is that on wider screens they come up side-by-side, but wrap under each other on the narrower setups.

<div>
 <form method="post" class="cmxform">
  <fieldset class="left">
   <legend>Payment Information</legend>
   <ol>
    ...
   </ol>
  </fieldset>
  <fieldset class="left">
   <legend>Processing Information</legend>
   <ol>
    ...
   </ol>
  </fieldset>
 </form>
</div>
<div class="clear"></div>
<div class="report">
 <table>
    ...
 </table>
</div>

Where .left defines “float:left” and .clear defines “clear:both”. Now it all works as I would expect, except for one slight problem. When the second fieldset appears under the first one, the spacing is correct with report showing up right under the form, however whenever second fieldset floats to the right of the first fieldset, I see a nasty chunk of extra whitespace that I didn’t intend to place there. First I thought this was an issue with a clearing div, so I added “height:1px” to it, just for the fun of it, no difference whatsoever and as far as things stand right now I’m at a bit of a loss…

Here’s a good-looking version,

And here’s a not-so-good-looking one,

Sigh.

About these ads