Div is popping out of outer div when display smaller

Question

I got the following code: https://jsfiddle.net/2uhttdgk/3/

html {
  height: 100%;
}
html, body {
    min-height: 100% !important;
    /* prevent horizontal scrolling */
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


#menuButton {
    float:left;
    background-image: url("../images/hamburger_menu.png");
    width: 50px;
    height: 40px;
    margin-right: 5px;
}

#powerButtonBox {
    float: right;
}

#outerBox {
    min-height: 100%; 
    height: auto !important;
    height: 100%;
}

#title {
    background: #E95353;
    padding: 10px;
    color: white;
    font-size: x-large;
}


#outerBox {
    width: 100%;
    height: 100%;
}


.nav a small {
    display:block;
}
.nav {
    background: #E95353;
}
.nav a {
    border-radius:0px;
    color: white;
}

.nav-pills>li {
    text-align: center;
    padding: 10px;
    font-size: large;
}

.nav-pills>li.active { 
    background-color: #E95353; /*EF8686*/
    border-bottom: 5px solid white;
    color: white;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, 

.nav-pills>li.active>a:focus { 
    color: #fff; 
}

<div id="outerBox">
    <div id="title"> 
        <div id="menuButton"></div>
        This is the Title
        <div id="powerButtonBox">It is <a href="#" id="powerButton">powered on</a></div>
    </div> 

    <ul class="nav nav-pills nav-justified">
        <li id="newStuffButton" data-target="#" data-slide-to="0" class="store-tab active"><a href="#">New Stuff</a></li>
        <li id="doneStuffButton" data-target="#" data-slide-to="1" class="store-tab"><a href="#">Done</a></li>
    </ul>

    <div id="newStuff" class="list-group tabContent"></div>
    <div id="doneStuff" class="list-group tabContent"></div>
</div>

My Problem is, that the div with the button is spilling out of the title-div when the display width is too small. You can simply recreate the error when sliding the width smaller in the jsfiddle.

It is okay for me, that there is a line break. That is perfect. But it should still have the red background and be in the title-div. How can I accomplish that?

seems like `float` issue – Alive to die - Anant Mar 27 '18 at 09:45 — Alive to die - Anant, Mar 27 '18 at 09:45
`overflow: auto` on the title – Temani Afif Mar 27 '18 at 09:45 — Temani Afif, Mar 27 '18 at 09:45

Jeremy · Accepted Answer · 2018-03-27T09:51:52.707

5

Just add display: inline-block; and width: 100%; to the #title element.

Then the height will adjust to its content, and the red background will stay.

Edit

I don't know which one is more cleaner or if 1 of them is better, but like @Temani Afif says overflow: auto; also will work.

edited Mar 27 '18 at 09:51

answered Mar 27 '18 at 09:47

Jeremy

1,384
3
10
24

1

`is more cleaner or if 1 of them is better` --> it's not about cleaner or better, it's about understanding what's happening and how each one fix the issue ;) – Temani Afif Mar 27 '18 at 09:53

Div is popping out of outer div when display smaller

1 Answers1