CODEWITHSUNDEEP
htmlcss
BobbyJones
BobbyJones

Reputation: 1364

Why does my text div spill out past my container div?

I really need your help,

I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?

Here is the CSS markup:

    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    display: none;
}

#container {
    background: #FFF;
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 2px solid rgb(100,139,170);
    height: 100%;
    position: relative;
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100,139,170);
    padding: 4px;
    font-weight: bold;
}
#text {

    height: 100%;
    border: 1px solid red;

}

HTML:

<div id="wrapper">

    <div id="container">

        <div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>

        <div id="text"><p>test</p></div>

    </div>

</div>

Here is a snapshot of the problem:

enter image description here

Upvotes: 0

Views: 2185

Answers (4)

Zlatko Vujicic
Zlatko Vujicic

Reputation: 353

Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.

CodePen Sample

<div id="wrapper">

<div id="container">

    <div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>

    <div id="text"><p>test</p></div>

</div>


#wrapper{
    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    margin-right: -250px;
    position: absolute;
    border: 1px solid yellow;
}

#container {
    background: #FFF;
    left: 0%;
    padding-bottom: 30px;
    top: 0%;
    margin: 0;
    height: 100%;
    border: 2px solid rgb(100,139,170);
    position: relative;
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100,139,170);
    padding: 4px;
    font-weight: bold;
    border: 1px solid green;
}
#text {
    height: 100%;
    border: 1px solid red;
}

I also fixed positioning for you.

Upvotes: 0

Stickers
Stickers

Reputation: 78796

Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.

I also noticed the layout can be done simpler as follows.

#wrapper {
    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    margin-bottom: -50px; /*half height*/
    margin-right: -250px; /*half width*/
    position: absolute;
    /* display: none; */
}
#container {
    background: #FFF;
    border: 2px solid rgb(100, 139, 170);
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100, 139, 170);
    padding: 4px;
    font-weight: bold;
}
#text {
    border: 1px solid red;
}
<div id="wrapper">
    <div id="container">
        <div style="float:left;" class="topbar">Custom Dialog Box</div>
        <div class="topbar" style="text-align: right;">Close</div>
        <div id="text">
            <p>test</p>
        </div>
    </div>
</div>

Upvotes: 1

Amir
Amir

Reputation: 398

The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.

To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments

Upvotes: 2

Vinc199789
Vinc199789

Reputation: 1046

You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.

Upvotes: 0

Related Questions