I don’t know how you front-end specialists memorize all those lil browser tricks.
By spending 8 hours a day for months staring at it.
This seems to work a little bit better as it doesn’t explode into madness,
It’s doing a fine job exploding into madness over here (FF3.6.22/Ubuntu Linux with slightly enlarged fonts and no javajunk) : )
Looking at version 2, what I’m seeing is this:
the form itself isn’t containing the stuff inside it, because the stuff inside it is floated
the divs inside who are floated do indeed have the right margin, but it’s not having any effect because
the inputs inside still don’t have any CSS width set, but they were set to “display: block”. So they are like totally way wider than the divs so I can’t see the margin doing anything.
If I were you I’d do this:
First, set a fugly background colour (#f00) on the form and make it enclose its floats by arbitrarily giving it some reasonable width (in px to start) and adding overflow: hidden on it. This is temporary for testing.
Now give each div a different fugly background colour (#FF0).
For foos and giggles give the labels fugliness too (#0F0) just so you can see where they are.
Now set px widths on the inputs themselves, something much smaller than the widths you’ve set on your divs (who cares if it’s ridiculously small at this point, you just want to make sure they cannot pop out of these divs).
Now if the form has a width that’s not wide enough for those two divs to fit side by side, you should get one underneath the other. If you wanted them side by side, increase the width of the form until they all fit that way.
That ought to get you started and once you have fugly eye-burning background colours on these things you’ll find dealing with floats and junk just got way easier.
Now when you get stuff sitting where you want it, you’ll have to decide if you want to keep the overflow: hidden and width on the form (if you wanted email and password fields stacked on top of each other then I believe you will want the width, but then the floating of the divs isn’t necessary so overflow could still be removed), so maybe we’ll just see where you are after you try the testing stuff. : )