En firefox se altera el flujo normal del html

[mariano_donati]

Hola a todos. El problema que tengo es que si pongo dos capas, por ejemplo <div id="capa1"></div><div id="capa2"></div>, en firefox se me pone una encima de la otra, cuando en realidad lo que quiero es que la segunda se situe al lado de la primera, respetando el flujo html. En IE anda como espero. Este es el código:

html

Código:

<!-- FORMULARIO DE REGISTRO -->
<div id="div_reg_form_container">
<form method="post" action="Actions/do_registration.php">
    <div id="div_user_data">
        <fieldset>
            <legend>Datos de usuario</legend>
                <div id="div_table_user_data">
                    <table class="table_group_form">
                        <tr>
                            <td class="input_label">Nombre de usuario:</td>
                            <td><input type="text" name="nickname"/></td>
                        </tr>
                        <tr>
                            <td class="input_label">Contrase&ntilde;a:</td>
                            <td><input type="password" name="password"/></td>
                        </tr>
                        <tr>
                            <td class="input_label">Repetir contrase&ntilde;a:</td>
                            <td><input type="password" name="password_confirm"/></td>
                        </tr>
                    </table>
                </div>
                <div id="div_user_data_input_info">dasdasd</div>
        </fieldset>
    </div>
    <div id="div_student_data">
        <fieldset>
            <legend>Datos de alumno</legend>
        </fieldset>
    </div>
    <div id="div_personal_data">
        <fieldset>
            <legend>Datos personales</legend>
        </fieldset>
    </div>
</form>

css

Código:

div 
{
    border: solid black 1px;
}

fieldset
{
    border: solid #336699 1px;
}

legend
{
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FF6600;
}

.table_group_form
{
    margin-top: 16px;
    margin-bottom: 16px;
}

.input_label
{
    font-family: sans-serif;
    font-size: 11px;
    color: #666666;
    text-align: right;
    padding-right: 10px;
    width: 160px;
}

#div_reg_form_container
{
    float: left;
    width: 70%;    
}

#div_table_user_data
{
    float: left;
    width: 50%;
}

#div_user_data_input_info
{
    position: relative;
    width: 30%;
    padding-right: 40px;
}

Las dos capas que quiero que me aparezcan situadas una al lado de la otra son div_table_user_data y div_user_data_input_info.
Saludos.

[Mikmoro]

Pues tienes varias opciones:
1.- ponle float left también al segundo bloque.
2.- le quitas la anchura y le das el margen que necesita

#div_user_data_input_info {margin-left:50%;
padding-right:40px;
}

Seguro que hay más. Prueba cuál es compatible con la mayoría de navegadores.

[mariano_donati]

Gracias. La primera funcionó a la perfección en Firefox y en IE. Saludos.

[killinge]

gracias por su ayuda