Question

I seem to have stuck numerous hours in a modal dialog with unexpected behavior in Chrome, for which I could use your help. The dialog is a hidden div consisting of two smaller divs, one floated left and one floated right.

I use nyroModal for my dialog and have tried different workarounds to hide scrollbars, like using overflow: hidden, or trying to set the sizes of the dialog manually (though I find it kind of hard to customize nyroModal, due to my limited knowledge yet in JavaScript).

The basic structure of the divs is following:

<div id="signup" class="nyroModal">

    <div id="signup_pt1" class="float_left" >
        <h2>Get your free iGuide account!</h2>
        <form name="signup_form" id="signup_form" action="post">
              ...
              ...
        </form>
        <br class="clear" />
    </div>

    <div id="signup_pt2" class="float_right">
        <h3>Why use iGuide?</h3>
        ...
        ...
        <br class="clear"/><br />
    </div>

</div>

And here is my attempt to set a manual height to #signup dialog:

$(function() {
    $('#signup').nyroModal({
        sizes: {
            height: 600,
            width : 900 
        }
    });
});

So far, as you can see from the pictures, Chrome drinks a lemonade. Is it a bug, a feature (:?), or maybe something I miss? Any ideas?
Thank you for your time.

Edit: Due to link rotting I removed the picture links.

Answer 1

I cant see your images because the links are broken, but I’m going to assume I know what they would look like. I don’t know if you have solved your problem yet or not, but an issue with your first example is that your clearing < br /> needs to be outside of the floated elements.

So it should look like this:

<div>
    <div style="float: left">
      Stuff
    </div>

    <div style="float: right">
      Stuff
    </div>

    <br class="clear">
</div>

However, I came to this thread because of a nyroModal sizing issue as well, so I don’t know if its going to work properly with nm.