I’ve made a jumbled mess, so I stripped my html and css to just the basic structure trying to figure out what I’m doing incorrectly. Essentially the page has a “header” container at the top of the page. Below that, it is divided into two columns; on the left are navigation buttons and to the right is the content.
The only fixed width is for the navigation buttons. I’m not after a “pixel-perfect” look, but I’m getting a gap below the header division as soon as I add any content into the top division. (I changed the background colors to emphasize the problem.)
Here it is with no content in the top division:
If I add a non-breaking space to the top division, I get this:
If I add paragraph text, the vertical buttons get “pushed down”:
<body>
<div id="container">
<div id="header" class="clear">
<p> </p>
</div>
<!-- Vertical Menu -->
<div id="nav" class="clear">
<nav>
<ul id="vertical">
<li><a href="#" title="">Menu Item</a></li>
<li><a href="#" title="">Menu Item</a></li>
<li><a href="#" title="">Menu Item</a></li>
<li><a href="#" title="">Menu Item</a></li>
</ul>
</nav>
</div>
<div id="content" class="clear">
<p>Lorem ipsum dolor sit etc.etc.etc...
</div></div>
</body></html>
body, html {
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #292929;
}
p {
margin: 0;
padding: 0;
}
#container {
width: 100%;
margin: 0;
background-image: url(../images/menu.jpg);
background-repeat: repeat-y;
}
#header {
width: 100%;
margin: 0;
color: #ffffff;
background-color: #ff0000;
}
#nav {
float: left;
width: 200px;
margin-top: 0;
font: 18px/1.5 Verdana, Helvetica, Arial, sans-serif;
overflow: hidden;
}
#content {
margin: 0 0 0 202px;
background-color: #ffffff;
}
/* ---------- Vertical Menu --------*/
ul#vertical {
margin: 0;
padding: 0;
width: 200px;
border: 1px solid #292929;
-webkit-box-shadow:0 0 5px #3c3c40;
-moz-box-shadow:0 0 5px #3c3c40;
box-shadow:0 0 5px #3c3c40;
}
ul#vertical li {
list-style-type: none;
}
ul#vertical li a {
border-bottom: 1px solid #292929;
display: block;
padding: 15px 30px;
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 0 #000;
-webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2);
}
/* --- Clearfix ----*/
.clear:after {
height: 0;
clear: both;
font-size: 0;
display: block;
visibility: hidden;
content: " ";
}
I know I have something basic, structurally wrong here but cannot figure out what to try next. Thank you for any advice.
Edited to add: Here is the actual site (in whatever frustrated mess I last left it) http://aercf.org/