[SOLUCIONADO] Dividir verticalmente un formulario

Begotten · #1 (**permalink**) 13/02/2015, 06:13

Buenas, tengo una duda con respecto a un formulario, necesito dejar la mitad de los campos en la izquierda de la pantalla y la otra mitad a la derecha, por si no se entiende, lo que quiero es esto:

El problema es que esto solo me funciona para mozilla, en chrome están todos los campos alineados al borde izquierdo.

El html del formulario es:

Código HTML:

Ver original<div id="miPagina" class="col-md-51 column" style="display:none">
            <h4 class='modal-title' id='myModalLabel'>Nuevo Cliente</h4> <br />
            <form method="post">
                        <div class='field-box'>
                            <label>Nombre</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='nombre' id='nombre'>
                            </div>
                        </div>
                        <div class='field-box'>
                            <label>Rut</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='rut' id='rut'>
                            </div>
                        </div>
                        <div class='field-box'>
                            <label>Telefono</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='telef' id='telef'>
                            </div>
                        </div>
                        <div class='field-box'>
                            <label>Fax</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='fax' id='fax'>
                            </div>
                        </div>
                        <div class='field-box'>
                            <label>Direccion</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='direccion' id='direccion'>
                            </div>
                        </div>
                        <div class='field-box'>
                            <label>Giro</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='giro' id='giro'>
                            </div>
                        </div>                      
                        <div class='field-box'>
                            <label>Correo Electronico</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='email' id='email'>
                            </div>
                        </div>
                        <div class='field-box'>
                            <label>Representante Legal</label>
                            <div class='col-md-7'>
                            <input type='text' class='form-control' name='repleg' id='repleg'>
                            </div>
                        </div>
                        <div class='field-box'>
                            <label>Rut Representante Legal</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='rurepleg' id='rurepleg'>
                            </div>
                        </div>
                        <div class='field-box'>
                            <label>Celular Representante Legal</label>
                            <div class='col-md-7'>
                                <input type='text' class='form-control' name='celular' id='celular'>
                            </div>
                        </div>
                        <div class="action">
                            <button onclick='registrarCliente(); mostrarTablas();' id="envio" value="envio" name= "envio" type='button' class='btn-flat2'>Guardar</button>
                            <button type="reset" class='btn-flat3' value="Reset">Reset</button>
                            <button onclick='listarClientes(); mostrarTablas();' type='button' class='btn-flat3'>Cerrar</button>        
                        </div>                       
            </form>
        <div id="mensaje" class="col-md-6">                        
        </div>
        </div>

y el css:

Código CSS:

Ver original.col-md-51{
    margin-top: 20px;
    margin-left: 20px;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    float: left;
}
.form-page .form-wrapper .field-box {
  margin-bottom: 30px;
  margin-left: 0;
  float: left;
  width: 50%;
}

Zeromm · #2 (**permalink**) 13/02/2015, 06:40

Pues usando floats... display: inline-block... display: table.... o display: flex... con cualquiera de ellos consigues lo que buscas

Begotten · #3 (**permalink**) 13/02/2015, 07:13

Solucionado, muchas gracias.

Código HTML:

Ver original<div id="miPagina" class="col-md-51 column" style="display:none">
            <h4 class='modal-title' id='myModalLabel'>Nuevo Cliente</h4> <br />
            <form method="post">
                <div class='field-box'>
                    <label>Nombre</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='nombre' id='nombre'>
                    </div>
                </div>
                <div class='field-box2'>
                    <label>Rut</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='rut' id='rut'>
                    </div>
                </div>
                <div class='field-box'>
                    <label>Telefono</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='telef' id='telef'>
                    </div>
                </div>
                <div class='field-box2'>
                    <label>Fax</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='fax' id='fax'>
                    </div>
                </div>
                <div class='field-box'>
                    <label>Direccion</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='direccion' id='direccion'>
                    </div>
                </div>
                <div class='field-box2'>
                    <label>Giro</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='giro' id='giro'>
                    </div>
                </div>                      
                <div class='field-box'>
                    <label>Correo Electronico</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='email' id='email'>
                    </div>
                </div>
                <div class='field-box2'>
                    <label>Representante Legal</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='repleg' id='repleg'>
                    </div>
                </div>
                <div class='field-box'>
                    <label>Rut Representante Legal</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='rurepleg' id='rurepleg'>
                    </div>
                </div>
                <div class='field-box2'>
                    <label>Celular Representante Legal</label>
                    <div class='col-md-7'>
                        <input type='text' class='form-control' name='celular' id='celular'>
                    </div>
                </div>
                <div class="action">
                    <button onclick='registrarCliente(); mostrarTablas();' id="envio" value="envio" name= "envio" type='button' class='btn-flat2'>Guardar</button>
                    <button type="reset" class='btn-flat3' value="Reset">Reset</button>
                    <button onclick='listarClientes(); mostrarTablas();' type='button' class='btn-flat3'>Cerrar</button>        
                </div>                       
            </form>
            <div id="mensaje" class="col-md-6">                        
            </div>
        </div>

Código CSS:

Ver original.form-page .form-wrapper .field-box {
  margin-bottom: 30px;
  margin-left: 0;
  float: left;
  width: 50%;
}
.form-page .form-wrapper .field-box2 {
  margin-bottom: 30px;
  margin-left: 0;
  float: right;
  width: 50%;
}