Preventing a DIV from overflowing past another div? - html

Question

From my code and logic, everything seems right. Why on earth would my news DIV overflow onto my Box D, where all the buttons are. It just doesn't make any sense to me.
Here is a pic of the problem:
* {
font-family: Segoe UI;
font-size: 9pt;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
background-color: #bbc3cb;
width: 100%;
height: 100%;
}
#main {
border: 1px solid rgb(112, 112, 112);
width: 800px;
height: 650px;
margin: 0 auto;
}
#boxA {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
border-bottom: 1px solid rgb(180, 180, 180);
background: #FFF;
}
#boxB {
height: 573px;
width: 200px;
border: 0;
float: left;
background: #FFF;
}
#boxC {
background: rgb(240, 240, 240);
height: 573px;
width: 598px;
border-left: 1px solid rgb(180, 180, 180);
border-top: 0;
border-bottom: 0;
border-right: 0;
display: inline-block;
}
#boxD {
background: rgb(240, 240, 240);
border-top: 1px solid rgb(180, 180, 180);
height: 44px;
text-align: center;
display: table;
width: 100%;
;
}
#menu {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
padding: 4px;
border: 1px solid #FFF;
}
#menu li:hover {
cursor: pointer;
}
.selected {
background: rgb(51, 153, 255);
color: #FFF;
border: 1px solid #FFF;
font-weight: bold;
}
.hidden {
display: none;
}
.item {
width: 100%;
height: 100%;
}
input[type="button"] {
cursor: pointer;
border: 1px solid #707070;
background-color: #F0F0F0;
border-radius: 4px;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
padding: 3px 6px;
width: 75px;
}
input[type="button"]:hover {
cursor: pointer;
background-color: #EAF6FD;
border: 1px solid #3C7FB1;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled],
input[type="button"][disabled]:hover {
border: 1px solid #ADB2B5;
text-shadow: 1px 1px #fff;
cursor: default;
background-color: #F4F4F4;
box-shadow: inset 0 1px 2px #fff;
}
div.frameT {
width: 100%;
padding: 0;
display: table;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
div.frameTC {
padding: 0;
vertical-align: middle;
display: table-cell;
margin: 0;
}
.section-title {
padding: 0;
margin: 0;
color: rgb(11, 63, 113);
font-weight: bold;
}
#news {
overflow-y: scroll;
height: 100%;
margin-bottom: 5px;
border: 1px solid red;
display: block;
}
<div class="frameT">
<div class="frameTC">
<div id="main">
<div id="boxA"><b>Application Title</b>
</div>
<div id="boxB">
<ul id="menu">
<li data-show="#1">Notes and Updates</li>
<li data-show="#2">Menu Item 2</li>
<li data-show="#3">Menu Item 3</li>
</ul>
</div>
<div id="boxC">
<div id="1" class="hidden item">
<span class="section-title">Notes and Updates</span>
<br>
<div id="news"></div>
</div>
<div id="2" class="hidden item">
Content Tab 2
</div>
<div id="3" class="hidden item">
Content Tab 3
</div>
</div>
<div id="boxD">
<div style="display: table-cell; vertical-align: middle;">
<input type="button" value="Search" class="btn" disabled>
<input type="button" value="Save" class="btn" disabled>
<input type="button" value="Add" class="btn" disabled>
<input type="button" value="Clear All" class="btn">
<input type="button" value="Delete" class="btn" disabled>
<input type="button" value="Export" class="btn" disabled>
<input type="button" value="Recall" class="btn" disabled>
</div>
</div>
<!-- End of Main -->
</div>
</div>

Answer 1

Height and width are always relative to the parent. In this case, your news div will be as tall as boxC. Since you have a title above, the height of this section will be 100% of the parent for news + ~20px for your title.
My suggestion is to set a specific height to your title using display:inline-block and height:20px like this:
.section-title {
padding: 0;
margin: 0;
color: rgb(11, 63, 113);
font-weight: bold;
height: 20px;
display: inline-block;
}
So you know exactly which size it will be on every browsers. Now you can use CSS3 calc function to determine the height of your box like this height:calc(100% - 20px):
#news {
overflow-y: scroll;
height: calc(100% - 20px);
margin-bottom: 5px;
border: 1px solid red;
display: block;
}
You can see this fiddle

Answer 2

Your news div is 100% but you also have this:
<span class="section-title">Notes and Updates</span>
which is taking up some space. You could resize the news div (make is smaller), maybe have the tag in another div that's 10% and make the news div 90%
ETA - or you might want to set the container div overflow-y property to hidden or scroll.

Answer 3

It's simple, just use overflow:auto to do this. Look your example:
* {
font-family: Segoe UI;
font-size: 9pt;
box-sizing: border-box;
}
html {
height:100%;
}
body {
padding: 0;
margin: 0;
background-color: #bbc3cb;
width: 100%;
height: 100%;
}
#main {
border: 1px solid rgb(112,112,112);
width: 800px;
height: 650px;
margin: 0 auto;
}
#boxA {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
border-bottom: 1px solid rgb(180,180,180);
background: #FFF;
}
#boxB {
height: 573px;
width: 200px;
border: 0;
float: left;
background: #FFF;
}
#boxC {
background: rgb(240,240,240);
max-height: 573px;
width: 598px;
border-left: 1px solid rgb(180,180,180);
border-top: 0;
border-bottom: 0;
border-right: 0;
display: inline-block;
overflow:auto;
}
#boxD {
background: rgb(240,240,240);
border-top: 1px solid rgb(180,180,180);
height: 44px;
text-align: center;
display: table;
width: 100%;;
}
#menu {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
padding: 4px;
border: 1px solid #FFF;
}
#menu li:hover {
cursor: pointer;
}
.selected {
background: rgb(51,153,255);
color: #FFF;
border: 1px solid #FFF;
font-weight: bold;
}
.hidden{ display:none; }
.item {
width: 100%;
height: 100%;
}
input[type="button"]
{
cursor:pointer;
border: 1px solid #707070;
background-color: #F0F0F0;
border-radius: 4px;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
padding: 3px 6px;
width: 75px;
}
input[type="button"]:hover
{
cursor:pointer;
background-color: #EAF6FD;
border: 1px solid #3C7FB1;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled], input[type="button"][disabled]:hover
{
border: 1px solid #ADB2B5;
text-shadow: 1px 1px #fff;
cursor:default;
background-color: #F4F4F4;
box-shadow: inset 0 1px 2px #fff;
}
div.frameT {
width: 100%;
padding: 0;
display: table;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
div.frameTC {
padding: 0;
vertical-align: middle;
display: table-cell;
margin: 0;
}
.section-title {
padding:0;
margin:0;
color: rgb(11,63,113);
font-weight: bold;
}
#news {
overflow-y: scroll;
height: 100%;
margin-bottom: 5px;
border: 1px solid red;
display: block;
}
<div class="frameT">
<div class="frameTC">
<div id="main">
<div id="boxA"><b>Application Title</b></div>
<div id="boxB">
<ul id="menu">
<li data-show="#1">Notes and Updates</li>
<li data-show="#2">Menu Item 2</li>
<li data-show="#3">Menu Item 3</li>
</ul>
</div>
<div id="boxC">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac blandit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis lectus vel pharetra tempus. Nulla sagittis enim mauris, vel imperdiet purus lobortis et. Nullam laoreet neque eget lectus finibus mattis. Cras sagittis, tortor vel vehicula placerat, dui sem imperdiet lectus, sit amet ultricies ante est nec elit. Sed consectetur lobortis dui non dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur elit dui, laoreet in orci et, feugiat malesuada quam. Pellentesque hendrerit diam et leo blandit, non tristique nisi blandit. Praesent ac sem quis turpis euismod malesuada et non justo. Quisque in diam risus. Donec eget sapien at libero ullamcorper sagittis. Integer nunc dolor, suscipit nec tincidunt quis, varius vitae mauris. Quisque malesuada enim ut semper tincidunt.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat ullamcorper iaculis. Donec sit amet turpis eu dui eleifend cursus eget a ante. Vivamus nec ligula a nunc consequat luctus a in libero. Nunc eu felis vel ante pellentesque aliquam eu sed augue. Mauris nec mi sit amet quam euismod pulvinar. Donec euismod sollicitudin bibendum. Maecenas accumsan neque vel pulvinar tempor. Morbi sit amet dolor pellentesque, vehicula lectus sit amet, accumsan mauris. Sed aliquam mi imperdiet quam scelerisque, et euismod felis auctor. Curabitur sit amet eros leo.
Duis placerat, ipsum quis lacinia tempus, purus dolor congue quam, eu tempor orci augue et libero. Curabitur ut ullamcorper mauris, tristique sollicitudin nisi. Ut est dolor, varius id tellus a, sagittis eleifend libero. Fusce gravida scelerisque facilisis. Aenean sollicitudin dolor in ante porttitor, ut finibus felis maximus. Morbi aliquet risus lectus. Pellentesque tincidunt enim quis cursus rutrum. Pellentesque at placerat enim, id consequat ex. Praesent justo magna, fermentum non erat in, aliquam euismod velit. Nulla facilisi. Donec mi nulla, bibendum vel nibh varius, consectetur vestibulum nunc. Vestibulum suscipit mollis efficitur.
Nunc dapibus eget nunc non feugiat. Etiam dictum nulla sed gravida volutpat. Quisque non metus tristique, accumsan tortor sed, sollicitudin lorem. Suspendisse facilisis suscipit lacus fringilla pulvinar. Suspendisse placerat condimentum justo, vel mollis ante lacinia non. Sed tempus elementum ligula, pulvinar accumsan justo viverra eu. Suspendisse justo massa, elementum nec hendrerit a, congue nec arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac blandit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis lectus vel pharetra tempus. Nulla sagittis enim mauris, vel imperdiet purus lobortis et. Nullam laoreet neque eget lectus finibus mattis. Cras sagittis, tortor vel vehicula placerat, dui sem imperdiet lectus, sit amet ultricies ante est nec elit. Sed consectetur lobortis dui non dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur elit dui, laoreet in orci et, feugiat malesuada quam. Pellentesque hendrerit diam et leo blandit, non tristique nisi blandit. Praesent ac sem quis turpis euismod malesuada et non justo. Quisque in diam risus. Donec eget sapien at libero ullamcorper sagittis. Integer nunc dolor, suscipit nec tincidunt quis, varius vitae mauris. Quisque malesuada enim ut semper tincidunt.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat ullamcorper iaculis. Donec sit amet turpis eu dui eleifend cursus eget a ante. Vivamus nec ligula a nunc consequat luctus a in libero. Nunc eu felis vel ante pellentesque aliquam eu sed augue. Mauris nec mi sit amet quam euismod pulvinar. Donec euismod sollicitudin bibendum. Maecenas accumsan neque vel pulvinar tempor. Morbi sit amet dolor pellentesque, vehicula lectus sit amet, accumsan mauris. Sed aliquam mi imperdiet quam scelerisque, et euismod felis auctor. Curabitur sit amet eros leo.
Duis placerat, ipsum quis lacinia tempus, purus dolor congue quam, eu tempor orci augue et libero. Curabitur ut ullamcorper mauris, tristique sollicitudin nisi. Ut est dolor, varius id tellus a, sagittis eleifend libero. Fusce gravida scelerisque facilisis. Aenean sollicitudin dolor in ante porttitor, ut finibus felis maximus. Morbi aliquet risus lectus. Pellentesque tincidunt enim quis cursus rutrum. Pellentesque at placerat enim, id consequat ex. Praesent justo magna, fermentum non erat in, aliquam euismod velit. Nulla facilisi. Donec mi nulla, bibendum vel nibh varius, consectetur vestibulum nunc. Vestibulum suscipit mollis efficitur.
Nunc dapibus eget nunc non feugiat. Etiam dictum nulla sed gravida volutpat. Quisque non metus tristique, accumsan tortor sed, sollicitudin lorem. Suspendisse facilisis suscipit lacus fringilla pulvinar. Suspendisse placerat condimentum justo, vel mollis ante lacinia non. Sed tempus elementum ligula, pulvinar accumsan justo viverra eu. Suspendisse justo massa, elementum nec hendrerit a, congue nec arcu.
<div id="1" class="hidden item">
<span class="section-title">Notes and Updates</span>
<br>
<div id="news"></div>
</div>
<div id="2" class="hidden item">
Content Tab 2
</div>
<div id="3" class="hidden item">
Content Tab 3
</div>
</div>
<div id="boxD">
<div style="display: table-cell; vertical-align: middle;">
<input type="button" value="Search" class="btn" disabled>
<input type="button" value="Save" class="btn" disabled>
<input type="button" value="Add" class="btn" disabled>
<input type="button" value="Clear All" class="btn">
<input type="button" value="Delete" class="btn" disabled>
<input type="button" value="Export" class="btn" disabled>
<input type="button" value="Recall" class="btn" disabled>
</div>
</div><!-- End of Main -->
</div>
</div>