Title staying outside the div

Question

Title staying outside the div

Navigation

#1 by (1 votes)

0

I have a div parent that contains two divs child and one of that div child contains two divs child . The title of one of these is getting out of it. I modified its size because of the available size that SO-en allows, to avoid creating horizontal scroll bars at least. actual values will be at the end of the div sample view.

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>

Actual values:

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

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

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

.div-child-sponsorship
width: 500px;
height: 100px;

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

P.S.: In this example above the achievement title did not even appear!

html css div

asked by anonymous 21.08.2018 / 20:23

1 answer

Make Wordpress direct access to a PHP file in the theme Repeated data in html (ANGULAR)

score 1 · Accepted Answer

It is not the title that is outside, it is the div itself that has gone down because it is the default display property of the element is display: block .

Just add display: inline-block to 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 values of the display property:

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

Inline The element behaves as an inline element. Examples of elements that behave like this are for example the tags span and a.

Inline-block Similar to inline, however, when defining inline-block in an element, we were able to set the width and height properties for it. Something that we can not do in a display element: inline.

Source: link