[SOLUCIONADO] DIV dentro de div

diegoguerrero · #1 (**permalink**) 17/10/2015, 08:40

Hola.

Tengo la siguiente situación y me gustaría saber cómo mantener la imagen y el texto a la misma altura pero en div separados (me daría igual que acabasen en el mismo DIV) Gracias (la imagen es solo de la parte 'left', es decir, 'left' contiene 'img' y 'text'). Además, yo trabajo con porcentajes y padding con px porque me gustaría que el diseño fuera responsive. Muchas gracias, de verdad.

Código CSS:

Ver original@charset "UTF-8";
/* ESTILO 1: BANNER */
    .banner-head{
        font: 17px "OpenSans-Regular";
        color: white;
        height: 32px;
        padding-left: 15px;
        padding-right: 15px;
    }
/* ESTILOS 2 Y 3: LEFT Y RIGHT DENTRO DEL BANNER */
    .banner-head .left{
        float: left;
        text-align:left;
        border: 1px solid lightgreen;
    }
    .banner-head .right{
        float: right;
        text-align:right;
    }
    .banner-head .left,.right{
        display: inline-table;
        width: 49.8%;
        padding-top: 3.5px;
        padding-bottom: 3.5px;
    }
/* ESTILOS 4 Y 5: IMG Y TEXT */
    .banner-head .left .img{
        width: 22px;
        display: inline-table;
            border: 1px solid lightblue;
    }
    .banner-head .left .text{
        border: 1px solid lightblue;
        display: inline-table;
    }

Código HTML:

Ver original<html>
<head>
    <link rel="stylesheet" href="../styles/styles.css"/>
    <title>Plataforma escolar 2.0</title>
</head>
<body>
    <div class="banner-head bgcolor-educamos-circulares">
        <div class="left">
            <div class="img"><img src="logo.png" height="22" width="22"></div>
            <div class="text">
                <font>Plataforma escolar 2.0</font>
            </div>
        </div>
        <div class="right">
            <!--<div class="img"><img src="logo.png" height="22" width="22"></div>-->
            <div class="text">Diego Guerrero</div>
        </div>
    </div>
</body>
</html>

diegoguerrero · #2 (**permalink**) 17/10/2015, 08:41

Por si la imagen no se ve bien, el enlace es http://www.subeimagenes.com/img/capt...2-1489294.html

AngelKrak · #3 (**permalink**) 17/10/2015, 10:49

solo dale un float left a los 2 div(el de la imagen y el texto) y quitas los display ;)

Demo:
http://codepen.io/AngelKrak/pen/dYZRje

diegoguerrero · #4 (**permalink**) 17/10/2015, 11:37

Cita:

Iniciado por AngelKrak

solo dale un float left a los 2 div(el de la imagen y el texto) y quitas los display ;)

Demo:
http://codepen.io/AngelKrak/pen/dYZRje

Perfecto, muchas gracias.