Use CSS to keep elements from overlapping based on height - html

Question

So I've run into a CSS formatting question that I'm hoping I can get some help with. In general, I've got my setup working, having the position of the menu shift based on the size of the screen so that it is always centered vertically and horizontally, etc.
However, I've run into an issue where if you make the viewing window too small, elements begin to overlap, which is not desired.
Here is a fiddle to display what I am talking about. I would prefer that the green box force everything else below it, so it no longer overlaps the red one (Everything within the "buttonContainerBase" div):
Fiddle
Here's the HTML Div setup and relevant CSS:
#buttonContainerBase {
position: absolute;
left: 0px;
width: 100%;
height: 100%;
}
.hCenterDiv {
width: 370px;
margin-left: auto;
margin-right: auto;
}
.backgroundBoxDiv {
position: absolute;
top: 50%;
height: 244px;
margin-top: -112px;
margin-left: 0px;
width: 370px;
overflow: auto;
display: inline-block;
text-align: center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
opacity: 0.95;
filter: alpha(opacity=95);
background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
width: 344px;
height: 76px;
margin-top: 5px;
display: inline-block;
background-color: red;
}
.dividingLineDiv {
height: 2px;
width: 370px;
background-color: #335B84;
}
#myLogo {
position: absolute;
top: 5px;
left: 5px;
width: 257px;
height: 73px;
background-color: green;
}
#contentWrapper {
min-height: 300px;
}
.buttonContainerDiv {
/*padding: 5px;*/
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#studentLoginDiv {
margin-bottom: 10px;
}
.customButton {
padding: 0px;
width: 225px;
height: 34px;
border: solid 2px #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: outset;
background-color: #f5f5f5;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
cursor: pointer;
}
.customButton:hover {
border: solid 2px #F5F5F5;
border-style: inset;
background-color: #f2f2f2;
}
.customButton:active {
border: solid 4px #F5F5F5;
border-style: inset;
background-color: #D1D1D1;
}
<div id="contentWrapper">
<div id="buttonContainerBase">
<div class="hCenterDiv">
<div class="backgroundBoxDiv">
<div class="elementContainerDiv">
<div class="logoContainerDiv"></div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
</div>
<div class="buttonContainerDiv" id="studentLoginDiv">
<input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
</div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
</div>
</div>
</div>
</div>
</div>
<div id="myLogo"></div>
</div>
Still kind of new to the CSS game, so I apologize in advance if things look funky/awkward.

Answer 1

This is happening because #myLogo has position:absolute, so :
change to position:relative in CSS
move the div in the DOM to be on the top
remove all CSS for #buttonContainerBase
In backgroundBoxDiv
remove margin-top: -112px, that would be somehow a hack.
add this code:
top: 0;
bottom:0;
right:0;
left:0;
margin:auto;
NOTE This will overlap in 320px view, so you might need media queries for that.
.hCenterDiv {
width: 370px;
margin-left: auto;
margin-right: auto;
}
.backgroundBoxDiv {
position: absolute;
top: 0;
bottom:0;
right:0;
left:0;
margin:auto;
height: 244px;
width: 370px;
overflow: auto;
display: inline-block;
text-align: center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/*
border: solid 2px #004586;
background-color: #FFFFFF;
*/
opacity: 0.95;
filter: alpha(opacity=95);
background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
width: 344px;
height: 76px;
margin-top: 5px;
display: inline-block;
background-color: red;
/* border: solid 2px #004586; */
}
.dividingLineDiv {
height: 2px;
width: 370px;
background-color: #335B84;
}
#myLogo {
position: relative;
top: 5px;
left: 5px;
width: 257px;
height: 73px;
background-color: green;
}
#contentWrapper {
/*
column-count: 2;
column-gap: 40px;
*/
min-height: 300px;
}
/******** BUTTONS *********/
.buttonContainerDiv {
/*padding: 5px;*/
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#studentLoginDiv {
margin-bottom: 10px;
}
.customButton {
padding: 0px;
width: 225px;
height: 34px;
border: solid 2px #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: outset;
background-color: #f5f5f5;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
cursor: pointer;
}
.customButton:hover {
border: solid 2px #F5F5F5;
border-style: inset;
background-color: #f2f2f2;
}
.customButton:active {
border: solid 4px #F5F5F5;
border-style: inset;
background-color: #D1D1D1;
}
/****** END BUTTONS *******/
<div id="contentWrapper">
<div id="myLogo"></div>
<div id="buttonContainerBase">
<div class="hCenterDiv">
<div class="backgroundBoxDiv">
<div class="elementContainerDiv">
<div class="logoContainerDiv"></div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
</div>
<div class="buttonContainerDiv" id="studentLoginDiv">
<input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
</div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
</div>
</div>
</div>
</div>
</div>
</div>