2

Tengo el siguiente codigo html y css:

#formulario_alta {
    margin-top: 5%;
    //  display:inline-block;
  
}




.contenedorNombreClub, .contenedorCIF, .contenedorDireccionClub, .contenedorPoblacionClub, .contenedorCodigoPostal, .contenedorServicio, .contenedorNombreBanco, .contenedorCodigoPostalBanco, .contenedorCuentaBancaria,
.contenedorNombreRepresentante,.contenedorApellidosRepresentante,.contenedorDNI,.contenedorFechaNacimiento,.contenedorCargoClub,.contenedorEmailRepresentante,.contenedorDireccionDomicilio,
.contenedorLocalidadDomicilio,.contenedorCodigoPostalRepresentante
{
    position: relative;
    width: 100%;
    max-width: 500px;
    margin-bottom: 10px;
}

#formulario_alta .etiquetaNombreClub, #formulario_alta .etiquetaCIF, #formulario_alta .etiquetaDireccionClub, #formulario_alta .etiquetaPoblacionClub, #formulario_alta .etiquetaCodigoPostal, #formulario_alta .etiquetaServicio,
#formulario_alta .etiquetaNombreBanco, #formulario_alta .etiquetaCodigoPostalBanco, #formulario_alta .etiquetaCuentaBancaria,
#formulario_alta .etiquetaNombreRepresentante, #formulario_alta .etiquetaApellidosRepresentante, #formulario_alta .etiquetaDNI, #formulario_alta .etiquetaFechaNacimiento, #formulario_alta .etiquetaCargoClub,
#formulario_alta .etiquetaEmailRepresentante, #formulario_alta .etiquetaDireccionDomicilio, #formulario_alta .etiquetaLocalidadDomicilio,
#formulario_alta .etiquetaCodigoPostalRepresentante label {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-bottom: 6px;
}

.valorNombreClub, .valorCIF, .valorDireccionClub, .valorPoblacionClub, .valorCodigoPostal, .valorServicio, .valorNombreBanco, .valorCodigoPostalBanco, .valorCuentaBancaria,
.valorNombreRepresentante, .valorApellidosRepresentante, .valorDNI, .valorFechaNacimiento, .valorCargoClub, .valorEmailRepresentante, .valorDireccionDomicilio, .valorLocalidadDomicilio, .valorCodigoPostalRepresentante {
    margin-top: 5px;
    color: #fff;
    font-size: 14px;
    padding: 5px 4px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #ccc;
    font-family: inherit;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.4);
}
<div id="formulario_alta">
	<div id="formulario_club">
		<div class="contenedorNombreClub">
			<span class="etiquetaFormulario etiquetaNombreClub">Nombre del Club*</span><br><input name="NombreClub" type="text" id="NombreClub" class="cajaTexto valorNombreClub">
		</div><div class="contenedorCIF">
			<span class="etiquetaFormulario etiquetaCIF">CIF del Club*</span><br><input name="CIF" type="text" id="CIF" class="cajaTexto valorCIF">
		</div><div class="contenedorDireccionClub">
			<span class="etiquetaFormulario etiquetaDireccionClub">Dirección Domicilio*</span><br><input name="DireccionClub" type="text" id="DireccionClub" class="cajaTexto valorDireccionClub">
		</div><div class="contenedorPoblacionClub">
			<span class="etiquetaFormulario etiquetaPoblacionClub">Población*</span><br><input name="PoblacionClub" type="text" id="PoblacionClub" class="cajaTexto valorPoblacionClub">
		</div><div class="contenedorCodigoPostal">
			<span class="etiquetaFormulario etiquetaCodigoPostal">Código postal*</span><br><input name="CodigoPostal" type="text" id="CodigoPostal" class="cajaTexto valorCodigoPostal">
		</div>
	</div><div id="formulario_contrato">
		<div class="contenedorServicio">
			<span class="etiquetaFormulario"> Plan*</span><br><select name="Servicio" id="Servicio" class="cajaTexto valorServicio">
				<option value="Free">Free</option>
				<option value="Basico">Basico</option>
				<option value="Premium">Premium</option>

			</select>
		</div>
	</div><div id="formulario_banco">
		<div class="contenedorNombreBanco">
			<span class="etiquetaFormulario etiquetaNombreBanco">Nombre del Banco*</span><br><input name="NombreBanco" type="text" id="NombreBanco" class="cajaTexto valorNombreBanco">
		</div><div class="contenedorCodigoPostalBanco">
			<span class="etiquetaFormulario etiquetaCodigoPostalBanco">Código postal*</span><br><input name="CodigoPostalBanco" type="text" id="CodigoPostalBanco" class="cajaTexto valorCodigoPostalBanco">
		</div><div class="contenedorCuentaBancaria">
			<span class="etiquetaFormulario etiquetaCuentaBancaria">Número de cuenta bancaria</span><br><input name="CuentaBancaria" type="text" id="CuentaBancaria" class="cajaTexto valorCuentaBancaria">
		</div>
	</div><div id="formulario_representante">
		<div class="contenedorNombreRepresentante">
			<span class="etiquetaFormulario etiquetaNombreRepresentante">Nombre*</span><br><input name="NombreRepresentante" type="text" id="NombreRepresentante" class="cajaTexto valorNombreRepresentante">
		</div><div class="contenedorApellidosRepresentante">
			<span class="etiquetaFormulario etiquetaApellidosRepresentante">Apellidos*</span><br><input name="ApellidosRepresentante" type="text" id="ApellidosRepresentante" class="cajaTexto valorApellidosRepresentante">
		</div><div class="contenedorDNI">
			<span class="etiquetaFormulario etiquetaDNI">DNI / NIE*</span><br><input name="DNI" type="text" id="DNI" class="cajaTexto valorDNI">
		</div><div class="contenedorFechaNacimiento">
			<span class="etiquetaFormulario etiquetaFechaNacimiento">Fecha de nacimiento*</span><br><input name="FechaNacimiento" type="text" id="FechaNacimiento" class="cajaTexto valorFechaNacimiento">
		</div><div class="contenedorCargoClub">
			<span class="etiquetaFormulario etiquetaCargoClub">Cargo en el Club*</span><br><input name="CargoClub" type="text" id="CargoClub" class="cajaTexto valorCargoClub">
		</div><div class="contenedorEmailRepresentante">
			<span class="etiquetaFormulario etiquetaEmailRepresentante">Correo electrónico*</span><br><input name="EmailRepresentante" type="text" id="EmailRepresentante" class="cajaTexto valorEmailRepresentante">
		</div><div class="contenedorDireccionDomicilio">
			<span class="etiquetaFormulario etiquetaDireccionDomicilio">Dirección del Domicilio*</span><br><input name="DireccionDomicilio" type="text" id="DireccionDomicilio" class="cajaTexto valorDireccionDomicilio">
		</div><div class="contenedorLocalidadDomicilio">
			<span class="etiquetaFormulario etiquetaLocalidadDomicilio">Localidad del Domicilio*</span><br><input name="LocalidadDomicilio" type="text" id="LocalidadDomicilio" class="cajaTexto valorLocalidadDomicilio">
		</div><div class="contenedorCodigoPostalRepresentante">
			<span class="etiquetaFormulario etiquetaCodigoPostalRepresentante">Código postal*</span><br><input name="CodigoPostalRepresentante" type="text" id="CodigoPostalRepresentante" class="cajaTexto valorCodigoPostalRepresentante">
		</div>
	</div><div class="contenedorCheck">
		<input name="Check" type="checkbox" id="Check" class="checkSeleccion valorCheck"><label for="Check">Usted consiente, <strong>a través de la marcación de la presente casilla</strong>, al tratamiento de sus datos con las finalidades descritas en la <a href="http://localhost:8441/politica-privacidad">Política de Privacidad.</a></label>
	</div><div class="contenedoru800-17">
		<input type="submit" name="u800-17" value="Enviar" onclick="return EnviaFormulario('formularioAlta',['txt||NombreClub','txt||CIF','txt||DireccionClub','txt||PoblacionClub','txt||CodigoPostal','sel||Servicio','txt||NombreBanco','txt||CodigoPostalBanco','txt||NombreRepresentante','txt||ApellidosRepresentante','txt||DNI','txt||FechaNacimiento','txt||CargoClub','eml||EmailRepresentante','txt||DireccionDomicilio','txt||LocalidadDomicilio','txt||CodigoPostalRepresentante','check||Check']);" id="u800-17" class="valoru800-17">
	</div>
</div>

Me gustaría poder alinear el div formulario_representante a la derecha, pero arriba del todo (esto último no consigo hacerlo) junto al botón y al check. Como podria hacerlo de tal forma que quede correctamente alineado?

Un saludo y muchas gracias de antemano!!

2
  • 3
    Deberías dejar la parte importante del código aquí, un link se puede perder o dejar de ser válido muy fácilmente y eso haría difícil a gente con el mismo o similar problema poder identificar que una respuesta podría ayudarle
    – Rabegi
    el 31 may. 2019 a las 6:50
  • 2
    Creo que tienes demasiadas clases Un elemento HTML puede tener varias clases así que lo que haría cambiaría todas las clases de tipo contenedorNombreClub en contenedor NombreClub. Esto simplificaría mucho el css. Para poder alinear el formulario_representante a la derecha envolvería los previos contenedores en un div. Una vez que lo tengas hay muchos métodos de hacerlo: flotando cajas, utilizando flexbox etc.
    – enxaneta
    el 31 may. 2019 a las 7:03

2 respuestas 2

3

Prueba utilizando un grid de 2 columnas, el codigo quedaria asi:

#formulario_alta {
    margin-top: 5%;
    /* display:inline-block;*/  
}

.contenedorNombreClub, .contenedorCIF, .contenedorDireccionClub, .contenedorPoblacionClub, .contenedorCodigoPostal, .contenedorServicio, .contenedorNombreBanco, .contenedorCodigoPostalBanco, .contenedorCuentaBancaria,
.contenedorNombreRepresentante,.contenedorApellidosRepresentante,.contenedorDNI,.contenedorFechaNacimiento,.contenedorCargoClub,.contenedorEmailRepresentante,.contenedorDireccionDomicilio,
.contenedorLocalidadDomicilio,.contenedorCodigoPostalRepresentante
{
    position: relative;
    width: 100%;
    max-width: 500px;
    margin-bottom: 10px;
}
#formulario_alta{display: grid;grid-template-columns:50% 50%;grid-template-rows: auto auto auto; }
#formulario_alta>div[id^='formulario']{grid-column: 1;}
#formulario_alta>div[id*='representante']{grid-column: 2;grid-row: 1/span 3;}
#formulario_alta>div[class^='contenedor']{grid-column: 1/span 2;}

#formulario_alta .etiquetaNombreClub, #formulario_alta .etiquetaCIF, #formulario_alta .etiquetaDireccionClub, #formulario_alta .etiquetaPoblacionClub, #formulario_alta .etiquetaCodigoPostal, #formulario_alta .etiquetaServicio,
#formulario_alta .etiquetaNombreBanco, #formulario_alta .etiquetaCodigoPostalBanco, #formulario_alta .etiquetaCuentaBancaria,
#formulario_alta .etiquetaNombreRepresentante, #formulario_alta .etiquetaApellidosRepresentante, #formulario_alta .etiquetaDNI, #formulario_alta .etiquetaFechaNacimiento, #formulario_alta .etiquetaCargoClub,
#formulario_alta .etiquetaEmailRepresentante, #formulario_alta .etiquetaDireccionDomicilio, #formulario_alta .etiquetaLocalidadDomicilio,
#formulario_alta .etiquetaCodigoPostalRepresentante label {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-bottom: 6px;
}

.valorNombreClub, .valorCIF, .valorDireccionClub, .valorPoblacionClub, .valorCodigoPostal, .valorServicio, .valorNombreBanco, .valorCodigoPostalBanco, .valorCuentaBancaria,
.valorNombreRepresentante, .valorApellidosRepresentante, .valorDNI, .valorFechaNacimiento, .valorCargoClub, .valorEmailRepresentante, .valorDireccionDomicilio, .valorLocalidadDomicilio, .valorCodigoPostalRepresentante {
    margin-top: 5px;
    color: #fff;
    font-size: 14px;
    padding: 5px 4px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #ccc;
    font-family: inherit;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.4);
}
    <div id="formulario_alta">
        <div id="formulario_club">
            <div class="contenedorNombreClub">
                <span class="etiquetaFormulario etiquetaNombreClub">Nombre del Club*</span><br><input name="NombreClub"
                    type="text" id="NombreClub" class="cajaTexto valorNombreClub">
            </div>
            <div class="contenedorCIF">
                <span class="etiquetaFormulario etiquetaCIF">CIF del Club*</span><br><input name="CIF" type="text"
                    id="CIF" class="cajaTexto valorCIF">
            </div>
            <div class="contenedorDireccionClub">
                <span class="etiquetaFormulario etiquetaDireccionClub">Dirección Domicilio*</span><br><input
                    name="DireccionClub" type="text" id="DireccionClub" class="cajaTexto valorDireccionClub">
            </div>
            <div class="contenedorPoblacionClub">
                <span class="etiquetaFormulario etiquetaPoblacionClub">Población*</span><br><input name="PoblacionClub"
                    type="text" id="PoblacionClub" class="cajaTexto valorPoblacionClub">
            </div>
            <div class="contenedorCodigoPostal">
                <span class="etiquetaFormulario etiquetaCodigoPostal">Código postal*</span><br><input
                    name="CodigoPostal" type="text" id="CodigoPostal" class="cajaTexto valorCodigoPostal">
            </div>
        </div>
        <div id="formulario_contrato">
            <div class="contenedorServicio">
                <span class="etiquetaFormulario"> Plan*</span><br><select name="Servicio" id="Servicio"
                    class="cajaTexto valorServicio">
                    <option value="Free">Free</option>
                    <option value="Basico">Basico</option>
                    <option value="Premium">Premium</option>

                </select>
            </div>
        </div>
        <div id="formulario_banco">
            <div class="contenedorNombreBanco">
                <span class="etiquetaFormulario etiquetaNombreBanco">Nombre del Banco*</span><br><input
                    name="NombreBanco" type="text" id="NombreBanco" class="cajaTexto valorNombreBanco">
            </div>
            <div class="contenedorCodigoPostalBanco">
                <span class="etiquetaFormulario etiquetaCodigoPostalBanco">Código postal*</span><br><input
                    name="CodigoPostalBanco" type="text" id="CodigoPostalBanco"
                    class="cajaTexto valorCodigoPostalBanco">
            </div>
            <div class="contenedorCuentaBancaria">
                <span class="etiquetaFormulario etiquetaCuentaBancaria">Número de cuenta bancaria</span><br><input
                    name="CuentaBancaria" type="text" id="CuentaBancaria" class="cajaTexto valorCuentaBancaria">
            </div>
        </div>
        <div id="formulario_representante">
            <div class="contenedorNombreRepresentante">
                <span class="etiquetaFormulario etiquetaNombreRepresentante">Nombre*</span><br><input
                    name="NombreRepresentante" type="text" id="NombreRepresentante"
                    class="cajaTexto valorNombreRepresentante">
            </div>
            <div class="contenedorApellidosRepresentante">
                <span class="etiquetaFormulario etiquetaApellidosRepresentante">Apellidos*</span><br><input
                    name="ApellidosRepresentante" type="text" id="ApellidosRepresentante"
                    class="cajaTexto valorApellidosRepresentante">
            </div>
            <div class="contenedorDNI">
                <span class="etiquetaFormulario etiquetaDNI">DNI / NIE*</span><br><input name="DNI" type="text" id="DNI"
                    class="cajaTexto valorDNI">
            </div>
            <div class="contenedorFechaNacimiento">
                <span class="etiquetaFormulario etiquetaFechaNacimiento">Fecha de nacimiento*</span><br><input
                    name="FechaNacimiento" type="text" id="FechaNacimiento" class="cajaTexto valorFechaNacimiento">
            </div>
            <div class="contenedorCargoClub">
                <span class="etiquetaFormulario etiquetaCargoClub">Cargo en el Club*</span><br><input name="CargoClub"
                    type="text" id="CargoClub" class="cajaTexto valorCargoClub">
            </div>
            <div class="contenedorEmailRepresentante">
                <span class="etiquetaFormulario etiquetaEmailRepresentante">Correo electrónico*</span><br><input
                    name="EmailRepresentante" type="text" id="EmailRepresentante"
                    class="cajaTexto valorEmailRepresentante">
            </div>
            <div class="contenedorDireccionDomicilio">
                <span class="etiquetaFormulario etiquetaDireccionDomicilio">Dirección del Domicilio*</span><br><input
                    name="DireccionDomicilio" type="text" id="DireccionDomicilio"
                    class="cajaTexto valorDireccionDomicilio">
            </div>
            <div class="contenedorLocalidadDomicilio">
                <span class="etiquetaFormulario etiquetaLocalidadDomicilio">Localidad del Domicilio*</span><br><input
                    name="LocalidadDomicilio" type="text" id="LocalidadDomicilio"
                    class="cajaTexto valorLocalidadDomicilio">
            </div>
            <div class="contenedorCodigoPostalRepresentante">
                <span class="etiquetaFormulario etiquetaCodigoPostalRepresentante">Código postal*</span><br><input
                    name="CodigoPostalRepresentante" type="text" id="CodigoPostalRepresentante"
                    class="cajaTexto valorCodigoPostalRepresentante">
            </div>
        </div>
        <div class="contenedorCheck">
            <input name="Check" type="checkbox" id="Check" class="checkSeleccion valorCheck"><label for="Check">Usted
                consiente, <strong>a través de la marcación de la presente casilla</strong>, al tratamiento de sus datos
                con las finalidades descritas en la <a href="http://localhost:8441/politica-privacidad">Política de
                    Privacidad.</a></label>
        </div>
        <div class="contenedoru800-17">
            <input type="submit" name="u800-17" value="Enviar"
                onclick="return EnviaFormulario('formularioAlta',['txt||NombreClub','txt||CIF','txt||DireccionClub','txt||PoblacionClub','txt||CodigoPostal','sel||Servicio','txt||NombreBanco','txt||CodigoPostalBanco','txt||NombreRepresentante','txt||ApellidosRepresentante','txt||DNI','txt||FechaNacimiento','txt||CargoClub','eml||EmailRepresentante','txt||DireccionDomicilio','txt||LocalidadDomicilio','txt||CodigoPostalRepresentante','check||Check']);"
                id="u800-17" class="valoru800-17">
        </div>
    </div>

Espero que te sirva. Saludos

2

Ya intentaste con:

display: block; margin: auto;

en el div?

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.