div "filha" sai fora dos limites da div principal em que está

[programador_09 1]

tenho uma div cabeçalho, dentro dela há outras duas divs, a logo e a escrito, eu queria que o logo flutuasse à esquerda, porém não está funcionando como o esperado, a div do texto está saindo da div cabeçalho, vejam:

 

O HTML:

<div class="cabecalho"> <!--div cabeçalho-->

<div class="logo"><!--logo-->

</div><!--fim logo-->

<div class="texto"><!--texto-->

</div><!--fim texto-->

</div> <!--fim div cabeçalho-->

O css:

.cabecalho { /*cabeçalho pai*/

width:100%;

height:20%;

border:solid 2px;

}

.logo { /*logo do cabeçalho*/

float:left;

width: 25%;

margin-left:2%;

height: 100%;

background-image:url(img/baner_teste.png);

background-size:100% 100%;

}

.texto {/*texto cabeçalho*/

position:relative;

margin-top:3%;

width:70%;

height:95%;

background-color:#F00;

}

Onde estou errando?

 

[flavio.designer 0]

Olá, gostaria de pegar carona na sua dúvida amigo, pois estou com um problema parecido.

Tenho um accordion no meu site que sobreponhe o rodapé quando o conteúdo dentro é muito grande.

O ideal seria ele empurrar o conteúdo abaixo a medida que crescesse.

Já tentei mexer no CSS no float, position mas nada. Agradeceria muita a ajuda de alguém.

 

Segue link da página em questão: http://www.propainel.com/novo/index.php/sinalizacao-viaria/

[L. Henrique 179]

Programador_09, você tem duas divs dentro de uma, então precisa declarar que elas se encontram na mesma linha usando o inline-block, segue código abaixo:

HTML:

<div class="cabecalho">
    <div class="logo">
        <img src="http://placehold.it/40x40" alt=""/>
    </div>
    <div class="texto">
        <p>Lorem Ipsum set dolor sit amet</p>
    </div>  
</div>

CSS:

.cabecalho{
    width: 100%;
    height: auto;
    border: 2px solid #000;
    padding: 5px 2px 5px 2px;
}
    .cabecalho div{
        display: inline-block;
    }
    .cabecalho .texto{
        float: right;
    }

O que eu defini aqui foi bem simples. Como tenho duas divs dentro de uma e elas não se alinham, usei o inline-block, junto de um float: right; para o texto (assim não ficariam uma ao lado da outra).

Caso queira conferir o resultado, acesse aqui a DEMO.

[Fábio BN 17]

Dúvida sobre este tema.

 

Quando se coloca numa CSS
.cabecalho div{
display: inline-block;

Todas as DIVs que estiverem dentro da DIV do cabeçalho receberam o comando ( display: inline-block; ) ?

Se colocasse por exemplo:

.cabecalho {
display: inline-block;

No caso acima, apenas s DIV do cabeçalho iria receber o ( display: inline-block; )?

 

Abraços!