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.
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.