I’m trying to create a page setup with two navigation areas (top and left) similar to this:
The light gray area is where the main content for each page is going to be. On the left is the second navigation menu that should extend to the bottom of the screen and be even with the main content area.
I can’t figure out how to adjust them so that both the left menu and the main content area extend down to the bottom of the screen. I use width percentages, float, and position CSS properties to align them next to each other (display property had no effect). I believe the problem is that I have to push the main content area up 95 pixels using:
bottom: 95px;
Otherwise, the bottom right corner of the left navigation menu and the top left corner of the main content area touch each other diagonally and there is a big white gap under the title area before it reaches the light grey main content area.
The only way that I have discovered to extended their heights’ to the bottom is to set their height in pixels, but that doesn’t completely work since I am moving the main content area up 95px so the bottom of the main content area has a white gap below it, and it is not even with the left navigation menu. My HTML secture looks like this:
<body>
<header>
<nav id="topMenu">
</nav>
<div id="titleAndUserInfo">
</div>
</header>
<nav id="leftMenu">
</nav>
<section id="main">
</section>
</body>
The nav tags follow the ul li a pattern
Update
I was able to get my CSS and HTML5 working so that the position is correct but the left navigation menu and the light gray main content area still doesn’t expanded down to the bottom of the screen when there is not enough content to do so automatically. How do I force this? Setting their heights with 100% or a px value don’t seem to be working. Here is my HTML, CSS, and results as viewed in Chrome.
<body>
<header>
<nav id="topMenu">
<ul>
<li><a href="/">xxx</a></li>
<li><a href="/Home/About">xxxxx</a></li>
</ul>
</nav>
<div id="titleUserLogin">
<h1>Title</h1>
Welcome <strong>test</strong>!
<a href="/Account/LogOff">Log Off</a>
</div>
</header>
<nav id="leftMenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
</ul>
</nav>
<section id="main">
<p>content</p>
</section>
</body>
/* General */
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
}
/* Header */
header {
text-align: left;
float: right;
position: relative;
width: 90.5%;
}
div#titleUserLogin {
color: #fff;
background-color: #303030;
display: inline-block;
width: 100%;
}
div#titleUserLogin h1 {
display: inline;
}
div#titleUserLogin a {
text-align: right;
float: right;
}
/* Navigation menus */
nav#topMenu ul {
padding: 0 0 2px;
position: relative;
display: inline;
}
nav#topMenu ul li {
list-style: none;
display: inline;
}
nav#topMenu ul li a {
background-color: #303030;
color: #fff;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
padding: 10px 20px;
line-height: 2.8;
text-decoration: none;
}
nav#leftMenu {
background-color: #303030;
position: relative;
float: left;
width: 9%;
}
nav#leftMenu ul {
position: relative;
}
nav#leftMenu ul li {
list-style: none;
}
/* main content */
section#main {
background-color: #d7d7d7;
height: 100%;
width: 90.5%;
float: right;
height: 100%;
}
Solution:
Add the following rule, and adjust nav#leftMenu and section#main rules with percentage heights until the content of each reaches the bottom of the screen: