Imprimir Página - ¿cómo alinear un div a la derecha dentro de otro div en cabecera de página web?

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.

Para alinear un elemento con position lo que tenes que hacer es la caja padre tenga position:relative; y el hijo que va a alinear position:absolute; ahi yo pose usar sus propiedades y alinea en la caja porque si no le pone position:relative; al padre el hijo de alinea con el con la pagina ejemplo el body.
Te recomiendo que siga este curso donde explica todo sobre css.
https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203 (https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203)

DRANXZ88 gracias por tu aporte amigo, leeré sobre el tema, ya que sobre position absolute y relative no lo entiendo muy bien porque no he encontrado información concreta sobre cómo trabajarlo, espero que ese material me sea de ayuda ^^

Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: rgiandc en 18 de Octubre 2016, 19:32