0

Tenho uma div pai que contém duas divs filho e uma dessa div filho contém outras duas divs filho. O título de uma dessas está ficando por fora da mesma. Modifiquei os tamanhos da mesma devido ao tamanho disponível que o SO-pt permite, para evitar criar barras de rolagem na horizontal pelo menos. valores reais estarão ao final da exibição do exemplo da div.

Código

.div-pai-banner {
    width: 480px;
    height: 300px;
    background-color: #CCC;
    margin: auto;
    margin-top: 20px;
    border: 3px solid #666;
    font-family: tahoma, Arial;
    font-size: 1.5em;
    font-weight: bold;
}

.div-filho-time {
    width: 480px;
    height: 220px;
    background-color: #FFF;
    text-align: center;
}

.div-filho-footer {
    width: 480px;
    height: 80px;
    background-color: #00F;
}

.div-filho-patrocinio {
    width: 300px;
    height: 80px;
    float: left;
    background-color: #F00;
    text-align: center;
}

.div-filho-realizacao {
    width: 180px;
    height: 80px;
    background-color: #F00;
    text-align: center;
}
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="estilo-banner.css"/>
        <title>Banner</title>
    </head>
    <body>
        <div class="div-pai-banner">
            <div class="div-filho-time">imagem do time...</div>
            <div class="div-filho-footer">
                <div class="div-filho-patrocinio">Patrocínio:</div>
                <div class="div-filho-realizacao">Realização:</div>
            </div>
        </div>
    </body>
</html>

Valores reais:

.div-pai-banner
width: 800px;
height: 500px;

.div-filho-time
width: 800px;
height: 400px;

.div-filho-footer
width: 800px;
height: 100px;

.div-filho-patrocinio
width: 500px;
height: 100px;

.div-filho-realizacao
width: 300px;
height: 100px;

P.S.: Nesse exemplo mais acima o título realização nem sequer apareceu!

1 Resposta 1

1

Não é o título quem está fora, é a própria div que desceu pois é a propriedade padrão de exibição do elemento é display: block.

Basta adicionar display: inline-block no estilo da div-filho-realizacao.

.div-filho-realizacao {
  width: 300px;
  height: 100px;
  background-color: #f00;
  text-align: center;
  display: inline-block;
}

Explicação de alguns valores da propriedade display:

Block O elemento se comporta como um bloco. Ocupando praticamente toda a largura disponível na página. Elementos de parágrafo (p) e título(h1, h2, ...) possuem esse comportamento por padrão.

Inline O elemento se comporta como um elemento em linha. Exemplos de elemento que se comportam assim são por exemplo as tags span e a.

Inline-block Semelhante ao inline, no entanto, ao definirmos inline-block em um elemento, conseguimos definir as propriedades de largura e altura para ele. Coisa que não conseguimos em um elemento com display: inline.

Fonte: http://tableless.github.io/iniciantes/manual/css/display.html

2
  • deu certo aqui, coloquei coloquei a div patrocinio para flutuar a esquerda, pensei que assim a outra div iria flutuar a sua direita, já que, a soma da largura das divs filha equivale a largura da div no qual elas estão contidas. 21/08/2018 às 18:41
  • Sim, poderia utilizar a propriedade float também, mas na div-filho-realizacao com o valor right.
    – Marco
    21/08/2018 às 18:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .