?
Solved

problems with righthand column in CSS

Posted on 2009-02-13
6
Medium Priority
?
165 Views
Last Modified: 2013-07-29
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

0
Comment
Question by:pinsah1
5 Comments
 
LVL 4

Expert Comment

by:justin-clarke
ID: 23631894
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
 
LVL 4

Expert Comment

by:justin-clarke
ID: 23631900
Typo... I didn't close the DIVs properly! ^^^

"</div>" in stead of "</div"
0
 

Author Comment

by:pinsah1
ID: 23632000
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
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 2000 total points
ID: 23634605
You cant make a float a percentage height... you have to use faux columns technique http://www.alistapart.com/articles/fauxcolumns/
0
 
LVL 58

Expert Comment

by:Gary
ID: 39363114
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Suggested Courses
Course of the Month17 days, 11 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question