CSS Positioning problem with Firefox

Question

Hello friends,
i've checked through the posts on several sites including stackoverflow
but was not able to see a similar problem like mine.

I have a page with some div containers, that separate input boxes and
let them look good.

Problem:
Although everything looks good on safari/opera/chrome, the boxes get weird
on firefox.

I'm posting the proper html and css parts and the url of the finished page and
a picture how the right and the wrong version look like.

I would be happy, if someone would clear me up on the general error so i can
avoid it in the future.

Thank you for reading :)

chrome:

firefox

<div id="inner_content_big">
    <div style="width: 900px; margin: 0 auto; ">
        <div class="box_login_banner">
            <h1>Login, Welcome :]</h1>
        </div>
        <div style=" clear: both; "></div>
        <div class="box_login_container">
            <?
            $data_form['class'] = 'form_login';
            ?>
            <?= form_open( 'user/login', $data_form ); ?>
            <div class="box_login_inputs">
                <div id="input_container">
                    <div id="input_label">
                        <h4>Email</h4>
                    </div>
                    <input type="input" name="login_username" id="login_special_input" class="validate[required,length[0,100]]" />
                    <div id="input_hint">
                        <h5>This is the address you specified while registering.</h5>
                    </div>
                </div>
            </div>
            <div style="clear: both;"></div>
            <div class="box_login_inputs">
                <div id="input_container">
                    <div id="input_label">
                        <h4>Password</h4>
                    </div>
                    <input type="password" name="login_password" id="login_special_input" class="validate[required,length[0,100]]" />
                    <div id="input_hint">
                        <h5>Please remember that the password is <u>case sensitive</u>.</h5>
                    </div>
                </div>
            </div>
            <?= form_close(); ?>
        </div>
        <div class="box_login_right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiat nulla pariatur laborum.
</div>
        <div style="float: left; ">
            <a class="css_button steelblue" href="#" id="button_submit">
                <span>Login</span>
            </a>
            <a class="css_button pink" href="#download" id="button_forgot_password">
                <span>Forgot your Password?</span>
            </a>
        </div>
        <div style="float: right; margin-right: 6px; ">
            <a class="css_button orange" href="#" id="button_no_account">
                <span>No account?</span>
            </a>
        </div>
        <?php if ( @$error_message != '' ): ?>
        <div class="redcssboxes box_login_infobox">
            <p>
                <img src="<?= base_url(); ?>images/header/error.png" />
                <?= $error_message; ?>
            </p>
        </div>
        <?php endif ?>
    </div>

.box_login_banner {
    float: left;
    margin-left: -26px;
    width: 939px;
    height: 50px;
    border-bottom: 1px solid #DDD;
}

.box_login_banner h1 {
    font-size: 28px;
    color: #888;
    margin-left: 30px;
    margin-top: -12px;
}


.box_login_container {
    float: left;
    margin-top: 40px;
    height: 200px;
    width: 440px;
}

.box_login_right {
    float: right;
    margin-top: 40px;
    margin-right: 14px;
    height: 200px;
    width: 420px;
}

.box_login_inputs {
    width: 888px;
    height: 100px;
    margin-top: -26px;
    margin-right: 0px;
}

.box_login_container #input_label {
    margin-left: 4px;
    width: 300px;
    height: 30px;
}

.box_login_container #input_label h4 {
    color: #888;
    font-weight: bold;
}

.box_login_container #input_container {
    float: left;
    margin-top: 10px;
    margin-left: 20px;
    width: 400px;
    height: 120px;
}

.box_login_container #input_container input {
    margin-top: -5px;
}

.box_login_container #input_hint {
    margin-top: -10px;
    margin-left: 4px;
    width: 100%;
    height: 20px;
}

.box_login_container #input_hint h5 {
    font-size: 12px;
    color: #999;
}


#login_special_input {
    color: #777;
    font-size:26px;
    width:97%;
    margin-top:2px;
    margin-right:6px;
    margin-bottom:16px;
    border:1px solid #e5e5e5;
    background:#fbfbfb;
    padding:3px;
}

Answer 1

login_special_input, input_container, etc. are IDs.

You can't use the same ID on two different elements. Change them to classes.

Answer 2

removing {float:left} prop of .box_login_container #input_container will give you desire result

Updated and corrected fiddle: http://jsfiddle.net/Zg7tH/1/

remember the suggestions for class and ids

reasons:

.box_login_inputs{ margin-top: -26px;} --> causing it to slide up and
.box_login_container #input_container {float:left} --> causing it to flow along with previous elements