Title getting out of the div

Asked

Viewed 476 times

0

I have a div parent containing two Divs son and one of these div son contains two other Divs son. The title of one of these is getting out of it. I modified the sizes of the same due to the available size of the SO-pt allows, to avoid creating scrollbars horizontally at least. real values will be at the end of the display of the example of div.

Code 

.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>

Real values:

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

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

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

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

.div-son-realization
width: 300px;
height: 100px;

P.S.: In this example above the title realization didn’t even show up!

html css div

1 answer

1


It’s not the title that’s out, it’s the title itself div that descended as it is the standard property of displaying the element is display: block.

Just add display: inline-block in the style of div-filho-realizacao.

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

Explanation of some property values display:

Block The element behaves like a block. Occupying virtually the entire width available on the page. Paragraph (p) and title (H1, H2, ...) elements have this behavior by default.

Inline The element behaves like an inline element. Examples of elements that behave like this are span and a.

Inline-block Similar to inline, however, by defining inline-block in an element, we can define the width and height properties for it. Thing we can’t get on an element with display: inline.

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

  • worked out here, I put put the patrocinio div to float left, I thought that so the other div would float right, since, the sum of the width of the daughter Divs equals the width of the div in which they are contained.

  • Yes, I could use the property float also, but in the div-filho-realizacao with the value right.

Browser other questions tagged html css div

You are not signed in. Login or sign up in order to post.