Mostrar Mensajes

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / ¿cómo alinear un div a la derecha dentro de otro div en cabecera de página web?

« en: 18 de Octubre 2016, 19:32 »

Saludos, tengo un pequeño problema. Estoy elaborando la cabecera de una página web, y resulta que dentro de un div quiero alinear otros dos elementos a la derecha, un formulario y un div, pero resulta que el div principal se achica cuando añado dentro de él los otros dos elementos. Otra cosa, es que al div principal le he añadido la propiedad float:left; en CSS, y cuando se la quito queda todo bien alineado, pero el div principal se desparece.

espero me echen una mano con esto, tal vez tenga que usar la propiedad position, pero eso no lo entiendo muy bien del todo. aquí les dejo el código:

Código HTML

Código: [Seleccionar]

<body>
        <div class="separador_cabecera1 float-clear">

        </div>
        
        <div id="cabecera" class="float-clear">
            <div id="titulo_cabecera" class="float-clear">
                <p>TITULO<br>subtitulo</p>
            </div>
            
            <form id="formulario_buscador">
                <p><input type="text" placeholder="Buscar..." class="buscador"><input type="submit" value="Buscar!" class="boton_buscador"></p>
            </form>
            
            <div id="redes-sociales" class="float-clear">
                <p style="text-align: center"><em>aqui van los iconos de redes sociales</em></p>
            </div>
        </div>
        
        <div class="float-clear separador_cabecera2">
        
        </div>
    </body>
</html>

Código CSS

Código: [Seleccionar]

body {
                margin: 0;
                padding: 0;
            }
            #redes-sociales {
                width: 300px;
                color: white;
                background-color: black;
                margin-top: 5px;
                float: right;
                border-radius: 1em;
            }
            .separador_cabecera1 {
                background-color: black;
                width: auto;
                height: 10px;
                margin: 0;
                padding: 0;
            }
            #cabecera {
                background-color: darkred;
                width: auto;
                margin: 0;
                padding: 0;
            }
            #titulo_cabecera {
                width: 300px;
                margin: 15px 0px 0px 80px;
                float: left;
                color:black;
                font-weight: bold;
                font-family: sans-serif;
            }
            .separador_cabecera2 {
                background-color: lightgray;
                width: auto;
                height: 10px;
                margin: 0;
                padding: 0;
            }
            #formulario_buscador{
                float: right;
                margin-top: 25px;
            }
            .buscador {
                border-top-left-radius: 2em;
                border-bottom-left-radius: 2em;
                border: solid white;
                background-color: darkgrey;
                color: black;
                padding: 4px 0px 3px 3px;
                margin: 0;
                }
            .boton_buscador {
                border-top-right-radius: 2em;
                border-bottom-right-radius: 2em;
                background-color: black;
                color: white;
                border: solid white;
                padding: 1px 5px 2px 4px;
                font-weight: bold;
                font-family: cursive;
                margin: 0;
            }
            .float-clear {
                clear: both;
            }

compilenlo y veanlo ustedes mismos para que vean el comportamiento.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: