2 replies [Last post]
Brandon
Offline
newbie
Baltimore, Maryland
Last seen: 16 years 38 weeks ago
Baltimore, Maryland
Joined: 2004-03-05
Posts: 3
Points: 0

I have a page that has two columns.
Column 1: Content
Column 2: Navigation

I want the two columns to have the same height, but the Copy that is in the content div varies in length. I want the navigation to be the same height as the content, regardless of how much copy is in the content area.

I would really appreciate any help you can offer!

Thanks.

-Brandon

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Debt Consolidation - non profit debt consolidation services</title>
<meta name="author" content="debt consolidation consultant">
<meta name="description" content="Debt consolidation and debt consolidation services that solve your debt problems.  Free debt consolidation from a non profit debt consolidation company with certified credit counselors.  Our debt consolidation services have helped many.">
<meta name="keywords" content="debt consolidation, credit card debt, debt management, debt management company, debt credit services, debt management program, debt reduction, debt relief, debt free, credit and debt counseling, debt consolidation company, free debt consolidation, debt solution, non profit debt consolidation"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/bkgd.gif">
<div id="topline"> 
  <h1>Debt Consolidation Solutions That Work</h1>
</div>
<div id="pageheader"> 
  <div id="headerimg"><img src="images/drowning_561.jpg" /></div>
  <div id="navheader"><img src="images/main2.jpg" /></div>
</div>

<div id="content">
	
  <div class="left"> 
    <div id="copytop"><img src="/images/top_rounded.gif" /></div>
    <div id="copy"> 
      <h1>Debt Consolidation</h1>
      <p>Debt consolidation is a debt relief solution that combines all of your 
        debts into one manageable payment with lower interest rates. Debt consolidation 
        sometimes lowers your total debt. Debt consolidation has myriad advantages 
        over bankruptcy, and debt consolidation may improve your credit history.</p>
      <h1>Is Debt Consolidation For You</h1>
      <p>If your debt problem happened to get out of control and you're seeking 
        tools to escape debt and get a fresh start, debt consolidation may guide 
        you to financial freedom. Debt consolidation is for you if your goal is 
        to stop abusing credit after your debt consolidation plan and stick to 
        a responsible budget.</p>
      <p>Debt consolidation is not for those who seek debt consolidation as a 
        way to lower monthly payments and keep more cash in their pockets to spend 
        on more unnecessary items. Debt consolidation is not for those who don't 
        plan to drastically change their spending habits after the debt consolidation. 
        Inevitably, these people end up growing deeper debt than before the debt 
        consolidation, rendering debt consolidation pointless.</p>
      <br class="clear-both" />
    </div>
    <div id="copybottom"><img src="/images/bottom_rounded.gif" /></div>
    <div class="clear-both">&nbsp;</div>
    <br clear="all" />
  </div> 

	
  <div class="right"> 
    <div id="nav"> 
      <div id="navtop"><img src="/images/sidnav_top.gif" /></div>
      <div id="debtedu"> 
        <p>Debt Education Center</p>
      </div>
      <div id="crededu"> 
        <p>Credit Education Center</p>
      </div>
      <div id="credcoun"> 
        <p>Credit Counseling Center</p>
      </div>
      <div id="credrepair"> 
        <p>Credit Repair Center</p>
      </div>
      <div id="navbottom"><img src="/images/sidnav_bottom.gif" /></div>
      <br class="clear-both" />
    </div>
	<div class="clear-both">&nbsp;</div>
  </div>
  
</div>
  
  
<div id="pagefooter">
	<br clear="all" />
</div>

	
<div class="clear-both">&nbsp;</div>
<br /><!-- extra break for opera 7 bug -->

</body>
</html>

The CSS is:

/* Copyright (c) 2004 siteprofit, LLC.  All Rights Reserved. */


* html body {
/*\*/
	text-align: center;
	background-image : url (/images/background.jpg);
	background-repeat : repeat;
/* */
}

body {
		padding : 10;
		margin : 10;

	}

	
#headerimg {
    position : absolute;
    top : 40px;
    left : 5px;
    width : 561px;
	}

.left {
    float : left;
    top : 30px;
    left : 5px;
    width : 561px;
	}

.right {
    float : right;
    top : 30px;
    left : 0px;
    width : 189px;
	}

#navheader {
    position : absolute;
    top : 40px;
    left : 576px;
    width : 189px;
	}
			
#copytop {    
	position : relative;
	float: left;
    top : 0px;
	bottom : 0px;
    left : 0px;
	right : 0px;
    width : 561px;
	z-index : 50;
	}
	
#copybottom {    
	position : relative;
	float: left;
	text-align: left;
	bottom : 0px;
    left : 0px;
	right : 0px;
    width : 561px;
	height: 30px;	
	z-index : 50;
	}

#navtop {    
	position : relative;
    top : 0px;
	bottom : 10px;
    left : 0px;
	right : 0px;
    width : 189px;
	height : 13px;	
	z-index : 50;
	}
		
#navbottom {    
	position : relative;
	bottom : 0px;
    left : 0px;
	right : 0px;
    width : 189px;
	height: 10px;	
	z-index : 50;
	}

#copy  {
	position : relative;
	float: left;
	padding-top : 10px;
	padding-bottom : 10px;
	padding-right : 30px;
	padding-left : 15px;
	left : 0px;
	width : 561px;
	text-align : justify;
	background-color : #ffffff;
	}
	
#copy h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	color: #003366;
	text-decoration: none;
	}

#copy h2, 
#copy h3,
#copy h4,
#copy h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	color: #003366;
	text-decoration: none;
	}


#copy p {
	  font-family : Arial, helvetica, sans-serif;
      font-size : xx-small;
      font-weight : normal;
      color : #000;
      background-color : transparent;
	}		

#copy ul,
#copy li {
	  font-family : Arial, helvetica, sans-serif;
      font-size : xx-small;
      font-weight : normal;
	  padding-right : 30px;
	  padding-left : 10px;
      color : #000;
      background-color : transparent;
	  margin-bottom: 0.3em;
	}

#topline {
	text-align : left;
 	position: relative;
	top: 8; right: 0; bottom : 0; left: 8;
	padding: 0;
	margin: 0 auto;
	width: 770px !important;
	height: 12px !important;
	}

#topline p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}
	
#topline h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	padding-left : 0px;
	top: 10; right: 0; bottom : 0;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}
	
#nav {
	position : absolute;
	left : 571px;
	width : 189;
	text-align : left;
	background-color : #c6cfd0;
	background-image : url(images/shadow.gif);
	background-repeat : repeat-y;
	}
	
#debtedu,
#crededu,
#credcoun,
#credrepair {
	position : relative;
	padding-left : 10px;
	text-align : left;
    width : 189px;
	height : 31px;	
	background-image : url(images/sidnav_on.gif);
	background-repeat : no-repeat;
}

#debtedu p,
#crededu p,
#credcoun p,
#credrepair p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-small;
	color: #003366;
	font-weight: bold;
	text-decoration: none;	
	line-height : 2.65;
	vertical-align : bottom;
}

#content {
	text-align : center;
 	position: relative;
	top: 50; 
	right : 0;
	left : 5;
	padding: 0;
	margin: 0 auto;
	width: 770px !important;
	}

#pageheader {
	text-align : center;
 	position: relative;
	top: 0; right: 0;
	padding: 0;
	margin: 0 auto;
	width: 770px !important;
	height: 190px !important;
}

#pagefooter {
	text-align : left;
 	position: absolute;
	top: 1900; left: 5;
	padding: 0;
	margin: 0 auto;
	height: 190px !important;
}

a {
 	font-family: Arial, Helvetica, sans-serif;
}
a:hover {
		background:#C6CFD0;
		text-decoration:underline;
		
}

br.clear-both, 
div.clear-both {
	font: 1px/1px sans-serif;
	clear: both;
	display: block;
}
								

zoniguana
Offline
newbie
Last seen: 16 years 38 weeks ago
Joined: 2004-03-08
Posts: 2
Points: 0

Same issue here...

I've run into the same thing on one of my templates I'm working on:
http://www.naturalwebs.com/giffendouglas/template.html
Wicked issue I'd really like to resolve...

zoniguana
Offline
newbie
Last seen: 16 years 38 weeks ago
Joined: 2004-03-08
Posts: 2
Points: 0

PS

Additionally, IE ignores the "fixed" property of the background image for the black div on the right.

If anybody else has run across this one, I'd much appreciate a pointer on what's breaking!

Thanks!!