problems with righthand column in CSS

I have built a site which has a header, main and right column, and a footer. This site needs to stretch 100% vertically and has a couple of background images. The only way I couuld get this to work in all browsers was to have the right hand column set up as a left column, but with the margin width pushing it over to the right. The problem I have now, is that any links or form boxes that are to the left of this column will not work (not clickable etc)!

I have added the code - help!
HTML
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="/Templates/level2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Golden Oldies Introductions</title>
<!-- InstanceEndEditable --> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
<script src="js/rollover.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
 
<body onLoad="MM_preloadImages('images/about_o.jpg','images/news_o.jpg','images/events_o.jpg','images/contact_o.jpg')">
<div class="wrapper"> 
  <div id="top"> </div>
  <!-- InstanceBeginEditable name="nav" --> 
  <div id="nav"><img src="images/nav1.jpg" /><a href="index.asp"><img src="images/home_o.jpg" alt="Home" name="home" width="151" height="65" border="0" id="home" /></a><a href="about.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about_o.jpg',1)"><img src="images/about.jpg" alt="About us" name="about" width="143" height="65" border="0" id="about" /></a><a href="news.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/news_o.jpg',1)"><img src="images/news.jpg" alt="News" name="news" width="143" height="65" border="0" id="news" /></a><a href="events.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/events_o.jpg',1)"><img src="images/events.jpg" alt="Events" name="events" width="142" height="65" border="0" id="events" /></a><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_o.jpg',1)"><img src="images/contact.jpg" alt="Contact us" name="contact" width="146" height="65" border="0" id="contact" /></a> 
  </div>
  <!-- InstanceEndEditable --> 
  <div id="text"><img src="images/text.jpg" /></div>
  <!-- InstanceBeginEditable name="main" --> 
  <!-- begin main content -->
  <br />
  <div id="redText"><img src="images/redtext.jpg" /></div>
  <br />
  <div id="pic"><img src="images/pic_hands.jpg"></div>
  <H1>Are you looking for that special someone? </H1>
  <p>Golden Oldies Introduction is aimed at the Senior Men and Women looking to 
    expand their social life, and have the opportunity to chat on-line to other 
    members and also have the opportunity to meet with them in a convivial meeting 
    place.</p>
  <p>The membership will be confined to <strong>0xfordshire</strong> and <strong>Buckinghamshire</strong>, 
    as from experience, Jill Barnes, the person setting up this new introduction 
    service, has found that from national dating agencies, you find yourself communicating 
    with people many miles away which is not very conducive to arranging a meeting 
    if you do so wish. </p>
  <p>Jill knows herself how lonely it can be living on your own and the difficulty 
    in making new acquaintances and is only too happy to talk to you if you have 
    any qualms about joining this dating agency.</p>
  <p>Six month membership will cost you £60.00. We accept payment through Paypal, 
    which you can securely pay either from a paypal account or by credit/debit 
    card.</p>
  <p><strong>Everyone deserves happiness, everyone needs a friend, if only for 
    a friendship rather than a long term commitment and it is up to you to take 
    the first step rather than being alone</strong>.</p>
  <!-- InstanceEndEditable --> 
  <!-- end main content -->
  <!-- #INCLUDE file="loginINC.asp" -->
  <div class="push"></div>
</div>
<div class="footer"><br />
  <span class="footerText"> Copyright &copy; 
  <script language="JavaScript">
                <!--
                  document.write(new Date().getFullYear());
                //-->
                    </script>
  , Golden Oldies Introductions | <a href="terms.asp">Terms & Conditions</a> | 
  Site by <a href="http://www.pinsah.co.uk" target="_blank">Pinsah Design</a></span> 
</div>
 
 
 
</body>
<!-- InstanceEnd --></html>
 
 
STYLESHEET
 
body {
	margin:0;
	padding:0;
	min-height: 100%;
	background: #fff;
	background-image :  url(images/bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	font-family : Verdana, Helvetica;
	text-align: center;
}
.wrapper {
	position: relative;
	width: 916px;
	background-image :  url(images/bg2.gif);
	background-repeat: repeat-y;
	background-color: #fff;
	margin: 0 auto -132px;
	text-align: left;
}
 
#top {
	padding:0;
	background:#fff url(images/top.jpg) no-repeat;
	height : 203px;
}
 
 
 /* NAVIGATION
------------------------------------------------------*/
#nav {
	background-image : url(images/navbg.jpg);
	background-repeat: no-repeat;
	width : 916px;
	height: 65px;
	float : center;
	margin:0 auto;
}
#nav #navlink-1 {
	width : 815px;
	align : center;
	height : 65px;
}
/* MAIN CONTENT
------------------------------------------------------*/
#login {
	float:left;
	position: absolute;
	top: 315px;
	width:235px;
	padding-top: 3px;
	padding-left: 667px;
    }
#login #loginTop {
	float:left;
	position: absolute;
	width:225px;
	height: 38px;
	background-image : url(images/loginTop.jpg);
	background-repeat: no-repeat;
    }
 
#login #loginContent {
	float:left;
	width:225px;
	height: 206px;
	padding: 48px 10px 10px 10px;
	background-image : url(images/loginBG.jpg);
	background-repeat: no-repeat;
    }
#login #loginButton {
	float:right;
	width:56px;
	height: 20px;
	padding: 10px 20px;
    }
.inputLogin {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #043F6B;
	background-color: #FFFFFF;
	width: 200px;
	height: 25px;
	border: 1px solid #E7E7E7;
	text-align: left;
	
	}
#register {
	float:left;
	position: absolute;
	top: 545px;
	width:255px;
	padding-top: 3px;
	padding-left: 667px;
}
#register #registerContent {
	float:left;
	width:225px;
	height: 162px;
	padding: 48px 10px 10px 10px;
	background-image : url(images/registerBG.jpg);
	background-repeat: no-repeat;
    }
#register #registerButton {
	float:right;
	width:73px;
	height: 20px;
	padding: 10px 20px;
    }	
#redText {
	float: left; /* put the content on the right */
	width: 626px; /* the width of our content column */
	height: 134px;
	padding-left: 25px;
	padding-bottom: 14px;
}
#text {
	width : 916px;
	height: 33px;
	float : center;
}
#pic{
	float: left; /* put the content on the right */
	width: 259px; /* the width of our content column */
	height: 165px;
	padding-left: 25px;
	padding-bottom: 10px;
}
/* FOOTER
------------------------------------------------------*/
.footer {
	position: relative;
	width: 916px;
	margin: 0 auto;
	background:  url(images/bottom.jpg) no-repeat;
	bottom:0;
}
.footerText {
	text-align: left;
	color : #616163;
	font-size : 70%;
	padding : 80px 0px 0px 0px;
	margin-left : 215px; 
	display : block;
}
.footerText a {
	color : #616163;
	text-decoration: none;
}
.footerText a:hover {
	color : #616163;
	text-decoration: underline;
}
/* BACKGROUND BOXES
------------------------------------------------------*/
div#box{
	margin-left: 25px;
	width: 610px;
	
    background:#E6E6E6;
	color:#000
	}
.curvebox{
	margin-left: 25px;
	width: 550px;
	padding: 5px;
    background:#E6E6E6;
	color:#000
	}
/* FONTS
------------------------------------------------------*/
p {
	padding: 10 260px 10 25px;
	font-size : 80%;
	color : #747679;
}
 
ol {
	list-style-type: decimal;
	padding: 10 260px 30 45px;
	font-size : 80%;
	color : #C71444;
	
}
 
li {
	padding: 30 0 10 20px;
	color : #747679;
	
}
 
.pSmall{
	font-size : 70%;
	color : #747679;
	text-align: right;
}
a {
	color: #C71444;
	text-decoration: none;
}
a:hover{
	color: #C71444;
	text-decoration: none;
}
H1 {
	padding: 10 270px 10 25px;
	font-size : 110%;
	font-weight: bold;
	color : #C71444;
}
H2 {
	padding: 10 10 0 215px;
	font-size : 90%;
	font-weight: bold;
	color : #C71444;
}
.txtnormal
{
	font-family : Arial, Helvetica;
	font-size : 80%;
	color : #747679;
}
 
.p2 {
	padding: 10 0px 10 0px;
	font-size : 80%;
	color : #747679;
}
.pLogin {
	font-size : 83%;
	font-weight: bold;
	color : #0D4167;
}
.pRegister {
	padding-right: 20px;
	font-size : 11px;
	font-weight: bold;
	color : #91820A;
}

Open in new window

pinsah1Asked:
Who is Participating?
 
Mark StegglesConnect With a Mentor Web DeveloperCommented:
You cant make a float a percentage height... you have to use faux columns technique http://www.alistapart.com/articles/fauxcolumns/
0
 
justin-clarkeCommented:
I don't see in your HTML where you have the left and right "columns" setup, i.e. the div tages that separate the "columns"

You should use something like this..

<div class="wrapper">
<div class="left">
some text
</div
<div class="right">
some text
</div
</dv>


.wrapper{position:relative; width:100%; height:300px;}
.left {float:left; display:block; width:59%;}
.left {float:left; display:block; width:39%;}
0
 
justin-clarkeCommented:
Typo... I didn't close the DIVs properly! ^^^

"</div>" in stead of "</div"
0
 
pinsah1Author Commented:
Sorry! the right column is in an include!


 <div id="login">
<div id="loginContent"><form name="form1" method="post" action=""><span class="pLogin">Email:</span><br>
        <input type="text" name="email" class="InputLogin"><br><br>
		<span class="pLogin">Password:</span><br>     
        <input type="text" name="password" class="InputLogin"><br><br>
		<div id="loginButton"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('login','','images/login_o.gif',1)"><img src="images/login.gif" alt="Login" name="login" border="0"></a></div>
      </form>
    </div>
  </div>
  <div id="register">
  <div id="registerContent"><span class="pRegister">Click on the link below to 
    register with Golden Oldies Introductions. The cost is &pound;60.00 for a 6 month subscription. </span><br> 
	<div id="registerButton"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('register','','images/register_o.gif',1)"><img src="images/register.gif" alt="Register" name="register" border="0"></a></div>  </div></div>

Open in new window

0
 
GaryCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.