Struggling to design a page layout with two navigation sections (top and left) similar to the example below:
The light gray area represents where the main content will be displayed on each page. On the left side is the secondary navigation menu that should extend all the way down to the bottom of the screen and align evenly with the main content area.
I'm having trouble adjusting the heights of both the left menu and the main content area so that they reach the bottom of the screen. I've been experimenting with width percentages, float, and position CSS properties to position them next to each other, but without success. It seems like the main issue is that I need to move the main content area up by 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 overlap diagonally, leaving a large white gap below the title area before reaching the light gray main content area.
The only solution I've found to extend their heights to the bottom is by setting fixed pixel heights, but this doesn't work perfectly as I'm shifting the main content area up by 95px, resulting in a white gap below its bottom and it not aligning with the left navigation menu. Here's a snippet of my HTML structure:
<body>
<header>
<nav id="topMenu">
</nav>
<div id="titleAndUserInfo">
</div>
</header>
<nav id="leftMenu">
</nav>
<section id="main">
</section>
</body>
The navigation elements follow the pattern of ul li a
Update
I managed to get my CSS and HTML5 code working correctly for positioning, but the left navigation menu and the light gray main content area still don't extend to the bottom of the screen when there isn't enough content to do so automatically. How can I force this? Setting their heights to 100% or a specific pixel value doesn't seem to be effective. Here's my HTML, CSS, and the results 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%;
}