I've been grappling with a perplexing CSS issue that is causing a scroll bar to appear on a full page.
Initially, my div layout was as follows (with no scrollbar problem):
Container 100% (width)
wrapper 80%
navMenu 100%
centerDoc 100%
However, after adding another menu item to the horizontal menu on the right side, I encountered an unexpected behavior. Upon resizing the page to make it smaller, the new menu item would collapse to the left-hand bottom corner below the first menu item.
To resolve this collapsing issue, I made a change to my layout:
Container 100% (width)
navMenu 100% <-- moved navMenu out of wrapper
wrapper 80%
centerDoc 100%
This modification fixed the collapsing problem, but now a scroll bar appears at the bottom of the page when viewing it in its entirety. Unfortunately, I haven't been able to figure out how to eliminate it.
Here's a snippet of the HTML code:
<div id="conainer">
<?php require_once 'includes/header.php';
require_once 'includes/nav.php'; ?>
<div id="wrapper">
<p>this is the wrapper</p>
<div id="centerDoc">
<p>this is the centerDoc</p>
</div> <!--centerDoc !-->
</div> <!-- wrapper !-->
</div> <!--container !-->
Please note that the nav.php file includes the navMenu div.
Below is a snippet of the CSS code being utilized:
#container {
margin:auto;
width: 100%;
}
#wrapper{
width:80%;
}
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
width:100%;
font-weight:normal;
font-size:15px;
/*this keeps the drop down menu on top*/
position:relative;
z-index:50;
}
#centerDoc {
margin-top:2.8%;
margin-left:10px;
float:left;
width: 100%;
}
I realize this explanation may be lengthy, but any guidance or suggestions on resolving this issue would be greatly appreciated. Thank you!