Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Getting left nav to stretch to bottom of page 1

Status
Not open for further replies.
Rieekan

Rieekan

Programmer
Apr 2, 2001
737
US
While I'm sure I should know this already, I seem to be drawing a blank on how to stretch the left nav in the page below to fill the area to the bottom of the page. My client's current solution does this, but involves tables, and I'm trying to remove that unneeded nesting if possible. Any help is appreciated. (Please forgive the length of code)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="./includes/css/nationwide_home.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="mainContent">
    <div id="leftNav">
      <div id="secondaryNav">
        <ul>
          <li class="select"><a href='#' title='item 1'>item 1</a></li>
          <li><a href='#' title='item 2'>item 2</a></li>
          <li><a href='#' title='item 3'>item 3</a></li>
          <li><a href='#' title='item 4'>item 4</a></li>
          <li><a href='#' title='item 5'>item 5</a></li>
        </ul>
      </div>
      <div class="optionsBoxC">
          <h2>Shortcuts</h2>
          <ul>
            <li><a href="#">Shortcut 1</a></li>
            <li><a href="#">Shortcut 2</a></li>
            <li><a href="#">Shortcut 3</a></li>
            <li><a href="#">Shortcut 4</a></li>
            <li><a href="#">Shortcut 5</a></li>
          </ul>
      </div>
      <div class="optionsBoxC">
        <h3>
          <label for="090007d08000ef7c">Tools</label>
        </h3>
        <form name="dropdownForm">
          <select name="select2" id="090007d08000ef7c">
            <option value="#,T,750 , 530">Dropdown list information 1</option>
            <option value="#,T,750 , 530">Dropdown list information 2</option>
          </select>
          <input value="Go" type="button" name="Go2" class="btnGo" />
        </form>
      </div>
      <div class="optionsBoxC">
          <h2>Learn About</h2>
          <ul>
            <li> <a href="#">Learn About 1</a> </li>
            <li><a href="#">Learn About 2</a></li>
            <li> <a href="#">Learn About 3</a> </li>
            <li> <a href="#">Learn About 4</a> </li>
            <li> <a href="#">Learn About 5</a> </li>
            <li> <a href="#">Learn About 6</a> </li>
            <li> <a href="#">Learn About 7</a> </li>
          </ul>
      </div>
      <div id="bottomSpacer">&nbsp;</div>
    </div>
    <!--  Content Area -->
    <div id="contentMiddle">
      <div id="contentHeader">
        <div id="contentHeaderAlign">
          <div id="contentHeaderText">selected item</div>
          <div id="contentHeaderImage"><img src='images/content-image/pic_cp_auto_selected item.jpg' width="146" height="40" alt='Image alt text' /> </div>
        </div>
      </div>
      <div id="tertiaryNav">
        <div id="tertiaryNavCol">
          <ul id="tertiaryNavList">
            <li class="select"><a href='#' title='tertirary Nav 1'>tertirary Nav 1</a></li>
            <li><a href='#' title='tertirary Nav 2'>tertirary Nav 2</a></li>
          </ul>
        </div>
      </div>
      <div id="navigation"></div>
      <div id="details"> <a name="content" id="content"></a>
        <h1>selected item</h1>
        <h5>Sub-header</h5>
        <p>Ullamco laboris nisi consectetur adipisicing elit, cupidatat non proident. Quis nostrud exercitation eu fugiat nulla pariatur. Qui officia deserunt duis aute irure dolor excepteur sint occaecat.</p>
        <h5>Sub-header</h5>
        <p>Consectetur adipisicing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt. Duis aute irure dolor sunt in culpa cupidatat non proident. Ut labore et dolore magna aliqua. Qui officia deserunt in reprehenderit in voluptate ut enim ad minim veniam.</p>
        <p>Excepteur sint occaecat sunt in culpa eu fugiat nulla pariatur. Velit esse cillum dolore qui officia deserunt ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation sed do eiusmod tempor incididunt in reprehenderit in voluptate.</p>
        <p>Qui officia deserunt sunt in culpa ut labore et dolore magna aliqua. Cupidatat non proident, eu fugiat nulla pariatur. Duis aute irure dolor velit esse cillum dolore in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.</p>
        <p>Ut enim ad minim veniam, sunt in culpa ut labore et dolore magna aliqua. Consectetur adipisicing elit. In reprehenderit in voluptate ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, duis aute irure dolor consectetur adipisicing elit.</p>
        <ul type="disc">
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
        </ul>
        <h5>Sub-header</h5>
        <p>Ullamco laboris nisi consectetur adipisicing elit, cupidatat non proident. Quis nostrud exercitation eu fugiat nulla pariatur. Qui officia deserunt duis aute irure dolor excepteur sint occaecat.</p>
        <p>Consectetur adipisicing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt. Duis aute irure dolor sunt in culpa cupidatat non proident. Ut labore et dolore magna aliqua. Qui officia deserunt in reprehenderit in voluptate ut enim ad minim veniam.</p>
        <p>Excepteur sint occaecat sunt in culpa eu fugiat nulla pariatur. Velit esse cillum dolore qui officia deserunt ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation sed do eiusmod tempor incididunt in reprehenderit in voluptate.</p>
        <p>Qui officia deserunt sunt in culpa ut labore et dolore magna aliqua. Cupidatat non proident, eu fugiat nulla pariatur. Duis aute irure dolor velit esse cillum dolore in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.</p>
        <p>Ut enim ad minim veniam, sunt in culpa ut labore et dolore magna aliqua. Consectetur adipisicing elit. In reprehenderit in voluptate ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, duis aute irure dolor consectetur adipisicing elit.</p>
      </div>
    </div>
    <div id="contentRight">
      <div id="lifeEventsBox">
        <div id="contentDetails">
		  <h3>
            <label for="090007d0800116b1"></label>
          </h3>
          <form name="dropdownForm">
            <select name="select2" id="090007d0800116b1">
              <option value=",F,,">Life Events</option>
              <option value="#,F,,">Life Events 1</option>
              <option value="#,F,,">Life Events 2</option>
              <option value="#,F,,">Life Events 3</option>
              <option value="#,F,,">Life Events 4</option>
              <option value="#,F,,">Life Events 5</option>
              <option value="#,F,,">Life Events 6</option>
              <option value="#,F,,">Life Events 7</option>
              <option value="#,F,,">Life Events 8</option>
            </select>
            <input value="Go" type="button" name="Go2" class="btnGo" />
          </form>
          </div>
      </div>
      <div class="rightSpacer">&nbsp;</div>
	  <div class="promoBox">
	    <h3>Header</h3>
		<p>Ullamco laboris nisi consectetur adipisicing elit</p>
		<p>Ullamco laboris nisi consectetur adipisicing elit</p>
	  </div>
      <div class="rightSpacer">&nbsp;</div>
	  <div class="promoBox">
	    <h3>Header</h3>
		<p>Ullamco laboris nisi consectetur adipisicing elit</p>
		<p>Ullamco laboris nisi consectetur adipisicing elit</p>
	  </div>
    </div>
  </div>
</div>
</body>
</html>

And the CSS:
Code: 
body {
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
text-align:center;
margin:10px 0 0 10px;
padding:0;
}

#container {
margin-left:auto;
margin-right:auto;
text-align:left;
width:760px;
}

#mainContent {
margin:0;
padding:0;
}

#leftNav {
background-color:#D4E5F7;
vertical-align:top;
width:170px;
float:left;
height:100%;
}

#secondaryNav {
background-color:#0076CC;
color:#FFF;
font-size:.75em;
padding-bottom:19px;
padding-top:24px;
vertical-align:top;
width:100%;
}

#secondaryNav ul {
list-style:none;
margin-bottom:0;
margin-left:0;
margin-top:0;
padding-bottom:5px;
padding-left:7px;
}

#secondaryNav a {
color:#FFF;
font-size:1em;
text-decoration:none;
padding-left:18px;
display:inline-block;
}

html>body #secondaryNav a {
display:block;
}

#secondaryNav li {
background: url(../../images/other/nav_arrowA.gif) 3px .2em no-repeat;
margin-bottom:2px;
margin-right:5px;
margin-top:4px;
padding-bottom:2px;
padding-top:0;
}

#secondaryNav li.select {
background: url(../../images/other/nav_arrowB.gif) 3px .2em no-repeat;
border:1px solid #D4E5F7;
}

.optionsBoxC {
background-color:#D4E5F7;
border-top:2px solid #FFF;
color:#333;
font-size:.75em;
font-weight:700;
margin-bottom:2px;
margin-left:auto;
margin-right:auto;
padding-left:5px;
padding-right:10px;
padding-top:21px;
vertical-align:middle;
}

.optionsBoxC h2 {
color:#26739D;
font-size:1.1em;
font-weight:700;
padding-bottom:0;
text-decoration:none;
margin:0 0 4px;
}

.optionsBoxC h3 {
color:#26739D;
font-size:1.1em;
font-weight:700;
padding-bottom:0;
text-decoration:none;
margin:0 0 4px;
}

.optionsBoxC h4 {
color:#26739D;
font-size:1em;
font-weight:700;
text-decoration:none;
margin:0 0 4px;
}

.optionsBoxC form {
margin:0;
padding:0 0 21px;
}

.optionsBoxC select {
color:#000;
font-size:.85em;
margin-right:3px;
overflow:visible;
width:100px;
}

.optionsBoxC input {
margin-left:0;
margin-top:-3px;
vertical-align:middle;
}

.optionsBoxC ul {
padding-left:5px;
margin:0 0 12px;
}

.optionsBoxC li {
background: url(../../images/other/nav_bracket.gif) 3px 3px no-repeat;
list-style:none;
margin-bottom:5px;
margin-top:0;
padding:0;
}

.optionsBoxC a {
color:#26739D;
font-size:1em;
font-weight:400;
text-decoration:none;
padding-left:18px;
display:inline-block;
}

html>body .optionsBoxC a {
display:block;
}

#bottomSpacer {
font-size:.4em;
height:13px;
margin-bottom:4px;
margin-top:0;
padding-bottom:0;
padding-top:0;
}

#contentMiddle {
background-color:#FFF;
vertical-align:top;
width:400px;
float:left;
}

#contentMiddle img {
margin:0;
padding:0;
}

#contentHeader {
background-color:#B8D65C;
color:#FFF;
font-size:1.1em;
font-weight:700;
height:40px;
padding-left:10px;
width:390px;
}

#contentHeaderText {
width:244px;
float:left;
vertical-align:middle;
}

#contentHeaderImage {
width:146px;
float:right;
margin:0;
padding:0;
}

#tertiaryNav:before {
clear:both;
display:block;
height:0; 
visibility:hidden;
content:'text';
}

#contentSpacer {
background-color:#FFF;
height:10px;
padding-left:0;
}

#tertiaryNav {
font-size:0.8em;
margin:0 10px;
}

#tertiaryNavCol {
vertical-align:top;
width:190px;
float:left;
}

#tertiaryNavList {
margin-bottom:5px;
margin-left:-10px;
margin-top:13px;
padding:0 15px 8px 10px;
}

#tertiaryNavList ul {
list-style:none;
margin-bottom:0;
margin-top:0;
padding-bottom:0;
padding-top:0;
}

#tertiaryNavList li {
background: url(../../images/other/nav_arrowA.gif) 3px 2px no-repeat;
list-style:none;
margin:0 5px 1px 0;
padding:0 3px 1px 0;
}

#tertiaryNavList li.select {
background: url(../../images/other/nav_arrowB.gif) 3px 2px no-repeat;
border:1px solid #9DB37C;
}

#tertiaryNavList a {
color:#0076CC;
font-weight:400;
text-decoration:none;
padding-left:18px;
display:inline-block;
}

html>body #tertiaryNavList a {
display:block;
}

#navigation {
clear:both;
border-bottom:1px solid #2D84D3;
}

#details {
color:#000;
font-size:.8em;
width:380px;
margin:0 10px;
}

#details h1 {
color:#0076CC;
font-size:1.3em;
font-weight:700;
margin-bottom:5px;
margin-top:14px;
}

#details h2 {
color:#942226;
font-size:1em;
font-weight:700;
}

#details h3 {
color:#0076CC;
font-size:1em;
font-weight:700;
text-decoration:none;
}

#details h5 {
font-size:1em;
font-weight:700;
margin-bottom:0;
padding-bottom:0;
}

#details p {
font-size:1em;
margin-bottom:0;
padding-top:0;
}

#details a {
color:#0076CC;
text-decoration:underline;
}

#details ul {
margin-top:0;
padding-top:0;
}

#details li {
color:#000;
}

#details select {
color:#000;
font-size:.75em;
margin-left:7px;
}

#details input {
margin-left:0;
margin-top:-3px;
vertical-align:middle;
}

#details table {
font-size:.75em;
margin-top:0;
padding:0;
}

#details sup {
font-size:.75em;
}

#disclaimer {
font-size:.7em;
padding-left:10px;
}

#contentRight {
background-color:#FFF;
vertical-align:top;
width:190px;
float:right;
}

#lifeEventsBox {
background-color:#E9ECD9;
color:#000;
font-size:.75em;
font-weight:400;
text-align:left;
vertical-align:bottom;
margin:0;
padding:0 0 0 7px;
}

#lifeEventsBox h2 {
color:#26739D;
font-size:1em;
font-weight:400;
margin-bottom:-2px;
margin-top:0;
padding-bottom:0;
padding-top:0;
}

#lifeEventsBox h3 {
color:#26739D;
font-size:1em;
font-weight:400;
margin-bottom:3px;
margin-top:0;
padding-bottom:0;
}

#lifeEventsBox select {
color:#000;
font-size:.85em;
margin-right:3px;
margin-top:0;
overflow:visible;
padding-bottom:0;
padding-top:0;
}

#lifeEventsBox form {
margin:0 0 0 10px;
padding:7px 0 0;
}

#lifeEventsBox input {
margin-left:0;
margin-top:-3px;
vertical-align:middle;
}

#contentDetails {
height:40px;
}

#contentDetails h3 {
margin:0;
padding:0;
}

.promoBox {
background-color:#D4E5F7;
color:#000;
font-size:.9em;
text-align:left;
padding:5px 10px 5px 7px;
display:block;
}

.promoBox h3 {
color:#26739D;
font-size:1em;
font-weight:700;
text-decoration:none;
}

.promoBox p {
font-size:.8em;
}

.promoBox a {
color:#0076CC;
font-weight:700;
text-decoration:none;
}

.rightSpacer {
height:30px;
}

Again, I apologize for the length of coding here. Any help is greatly appreciated.

- George
 
Sort by date Sort by votes
Just so everyone knows, I found a different solution that works across most browsers (IE Mac 5 and NS 6/7 are no goes). A bit nicer than the Faux Columns, so I thought I'd share.

Equal Height Columns

Thanks for your help!

- George
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
736
bdwilcox
bdwilcox
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
800
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
211
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
785
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top