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!