I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the viewing window is too small.
Check out this fiddle to see what I mean. I want the green box to push everything below it so it doesn't overlap with the red one (all within the "buttonContainerBase" div):
Here's the HTML Div setup and relevant CSS:
<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>
As I am relatively new to CSS, I apologize in advance if things seem off or awkward. Thanks for your understanding!