5 replies [Last post]
gerardkcohen
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2005-11-21
Posts: 13
Points: 0

i need to accomplish a standard 3 column layout, but the right column needs to be position:fixed, as in always in the same spot when scrolling.

Can anyone help me with this?

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 9 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

3 fixed column layout, with right column fixed

heya,

have you played around with this at all yet? or are you just looking for a little push in the right direction?

You should google '3 column layout css' and you will find tonnes of info on css layouts. Most will boil down to either 'float' layouts or 'absolute position' layouts.

My guess is that if you want to fix the right column (which I have never tried) you might want to play with 'absolute position' layouts where you position: absolute the first two divs, then 'position: fixed'... something like that.

have a go. and post your results / problems.

gerardkcohen
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2005-11-21
Posts: 13
Points: 0

3 fixed column layout, with right column fixed

Gleddy, thanks for the response.

As a matter of fact, I have found tons of information on this. I ended up using the CSS Layout generator from here and it works great. I modified it for my needs, but now my problem is getting the div that is position:fixed to work properly in IE. It took me a few hours to figure it out when I was using tables, but the same fix is not working with this layout.

Basically, what is happening at this point is that as you scroll down the page, everything is stationary, EXCEPT the footer which ends up scrolling on top of the rest of the content.

The site is not live right now, its living in a virtual machine, but here is the code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<head>
<title>Untitled</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="columns.css" type="text/css" />
<!--[if lte IE 6]>
<style type="text/css">
html, body
	{
	height: 100%;
	overflow: auto;
	}
div.cart {
	position: absolute;
}
</style>
<![endif]-->
</head>
<body>
<!--Start Wrapper-->
<div id="wrapper" >
  <!--Start headerWrapper-->
  <div id="headerWrapper" >
    <!--Start Header-->
    <div id="header">
      <h3><span class="left">Order Now! 888-888-5555</span></h3>
      <span class="right">
      <ul>
	    <li><a href="View-cart.aspx">Shopping Cart</a></li>
	    <li><a href="Support.aspx">Support</a></li>
	    <li><a href="Contact.aspx">Contact</a></li>
	    <li><a href="faq.aspx">FAQ</a></li>
	  </ul>
      </span>
	<!--End Header-->  
    </div>
	<!--Start Logo-->
	<div id="logo">
	  <img src="Images/logo.gif" width="245" height="63"/>
	<!--End Logo-->  
	</div>	
	<!--Start Main Nav-->
	<div id="mainNav">
	  <ul>
	    <li><a href="Default.aspx"><span class="active">home</span></a></li>  
	    <li><a href="Default.aspx">LInk</a></li>  
	    <li><a href="Default.aspx">Link</a></li>
	    <li><a href="Default.aspx">Link</a></li>
	    <li><a href="Default.aspx">Link</a></li>
	    <li><a href="Default.aspx">Link</a></li> 
	    <li><a href="Default.aspx">Link</a></li>
	  </ul>
	<!--End Main Nav-->  
	</div>	
	<!--Start Utilities-->
	<div id="utilities">
	  <ul>
	    <li><a href="Default.aspx">Link</a></li> 
	    <li><a href="Default.aspx">Link</a></li>  
	    <li><a href="Default.aspx">Link</a></li>  
	    <li><a href="Default.aspx">Link</a></li>  
	    <li><a href="Default.aspx">Link</a></li>  
	    <li><a href="Default.aspx">Link</a></li> 
	  </ul>
	<!--End Utilities-->  
	</div>	
	<!--Start BreadCrumb-->
	<div id="breadCrumb">
	  <a href="Default.aspx">Home</a> &gt; Page
	</div>
	<!--End BreadCrumb-->
  <!--End headerWrapper-->
  </div>
  <!--Start MainWrapper-->
  <div id="mainWrapper" class="clearfix" >
  	<!--Start TwoCols-->
    <div id="twocols" class="clearfix">
      <!--Start MainCol-->
	  <div id="maincol" > 
	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
    feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
    
    <h2>Heading Two</h2>

	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
    in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
    at vero eros et accumsan et iusto odio dignissim.
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
    feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
    
    <h2>Heading Two</h2>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
    in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
    at vero eros et accumsan et iusto odio dignissim.</p>
	p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
    feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
    
    <h2>Heading Two</h2>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
    in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
    at vero eros et accumsan et iusto odio dignissim.</p>
	  <!--End MainCol-->
	  </div>
	  <!--Start RightCol-->
      <div id="rightcol" > 
		<!--Start Cart-->
		<div id="cart" class="cart">
		The Cart		
		<!--End Cart-->
		</div>
	  <!--End RightCol-->
	  </div>
	<!--End TwoCols-->
    </div>
	<!--Start LeftCol-->
    <div id="leftcol" > Left Column 
	<!--End Left Col-->
	</div>
  <!--End MainWrapper-->
  </div>
  <!--Start FooterWrapper-->
  <div id="footerWrapper" >
  <!--Start Footer-->
  <div id="footer">
    <ul>
      <li><a href="Default.aspx">Link</a></li>  
      <li><a href="Default.aspx">Link</a></li>  
      <li><a href="Default.aspx">Link</a></li>
      <li><a href="Default.aspx">Link</a></li>
      <li><a href="Default.aspx">Link</a></li>
      <li><a href="Default.aspx">Link</a></li> 
      <li><a href="Default.aspx">Link</a></li>
    </ul>
    <a href="Copyright.aspx">Copyright &copy; 2006 , All Rights Reserved</a>
  <!--End Footer-->
  </div>  
  <!--Start legal-->
  <div id="legal">
    <ul>
      <li><a href="How-to-buy.aspx">how to buy</a></li>  
      <li><a href="Return-policy.aspx">return policy</a></li>  
      <li><a href="Payment-terms.aspx">payment terms</a></li>
      <li><a href="Privacy-policy.aspx">privacy policy</a></li>
      <li><a href="Disclaimer.aspx">disclaimer of warranty</a></li>
    </ul>
  <!--End Legal-->
  </div>
  <!--End FooterWrapper-->
  </div>

<!--End Wrapper-->
</div>
</body>
</html>

CSS

/* generated by csscreator.com */ 
body{ 
 	margin:0; 
 	padding:0; 
 	text-align:center; 
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}  
#wrapper{ 
 	width:740px; 
 	text-align:left;  
	margin-left:auto; 
 	margin-right:auto;  
} 
#container {
	width:740px;
	height:100%;
}
#headerWrapper{
 	position:relative; 
 	width:100%;
} 
#header {	
	padding-top:5px;
	padding-bottom:10px;
	font-size:10px;	
}
#header h3{
	color:#4978D8;
	font-size:16px;
	font-weight:bold;
	text-align:left;
	margin-bottom:0px;
	margin-top:0px;
}
#header ul{
	list-style-type:none;
	margin-top:0px;
	margin-bottom:0px;
}
#header li {
	display:inline;
}
#header a:link, a:visited {
	color:#666666;	
	padding-left:5px;
	padding-right:5px;
	text-decoration:none;
}
#header a:hover {
	color:#4978D8;
	text-decoration:underline;
}
.left {
	float:left;
}
.right {
	float:right;
}
#logo {
	width:100%;
	clear:left;
}
#mainNav {
	width:100%;
	border-bottom:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	text-align:center;		
	padding-top:10px;
	padding-bottom:10px;
}
#mainNav ul {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;	
	text-transform:uppercase;
	list-style-type:none;
	margin-left:0px;
	margin-top:0px;
	padding-left:0px;
	padding-right:0px;
	margin-bottom:0px;
}
#mainNav li {
	display:inline;
	margin-left:0px;
}
#mainNav a{
	padding: 9px 10px 9px 10px;
	color:#666666;
	text-decoration:none;
}
#mainNav a:hover {
	color:#4978D8;
}
#mainNav .active {
	color:#4978D8;
}
#utilities {	
	border-bottom:1px solid #CCCCCC;
	text-transform:capitalize;
	text-align:center;	
	padding-top:5px;
	padding-bottom:5px;
}
#utilities ul{
	list-style-type:none;
	margin-left:0px;
	margin-top:0px;
	padding-left:0px;
	padding-right:0px;
	margin-bottom:0px;	
}
#utilities li {
	display:inline;
	margin-left:0px;
	margin-top:0xp;
}
#utilities a:link, a:visited {	
	font-size:10px;
	color:#999999;	
	font-weight:bold;
	text-decoration:none;
	padding-left:10px;
	padding-right:10px;	
	border-right:1px solid #CCCCCC;
}
#utilities a:hover {
	color:#4978D8;
	text-decoration:underline;
}
#breadCrumb {
	font-size:10px;
	color:#4978D8;	
	padding-top:5px;
	padding-bottom:5px;
}
#breadCrumb a {
	color:#666666;
	text-decoration:underline;
}
#breadCrumb a:hover {
	color:#4978D8;
	text-decoration:underline;
}
#leftcol{
 	width:150px; 
 	float:left; 
 	position:relative; 
 	background-color:#6F7376; 
} 
#twocols{
 	width:590px; 
 	float:right; 
 	position:relative; 
} 
#rightcol{
 	width:150px; 
 	float:right; 
 	position:relative; 
} 
#maincol{
	padding:5px;
	border:1px solid #CCCCCC;
	margin-left:5px;
	margin-right:5px;  
 	float: left; 
 	display:inline; 
 	position: relative; 
	width:415px;
}
#cart {
	background:#4978D8;
	width:140px;
	padding:5px;
	text-align:left;
}
.cart {
	position:fixed;
}
#cartTitle {
	font-size:12px;
	color:#FFFFFF;
	text-align:center;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
}
#totalItems {
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	color:#FFFFFF;
	padding:5px;
}
#totalItems li {
	list-style-type:none;
	padding-left:5px;
	margin-left:0px;
	text-align:left;
}
#totalCost {
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	color:#FFFFFF;
	padding:5px;
	font-weight:bold;
	text-align:left;
}
#cartOptions {
	padding-top:15px;
	padding-bottom:15px;
	text-align:center;
	border-bottom:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
}
#cartOptions a {
	font-weight:bold;
	padding: 5px;	
	margin:5px;
	border:1px solid #CCCCCC;
	color:#FFFFFF;
	text-decoration:none;
}
#cartOptions a:hover {
	background:#CCCCCC;
	color:#4978D8;
	padding: 5px;
	margin:5px;
	border:1px solid #CCCCCC;
	text-decoration:none;
}
#footerWrapper{
 	clear:both;
} 
#footer {
	width:100%;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}
#footer ul {	
	text-transform:capitalize;
	list-style-type:none;
	margin-left:0px;
	margin-top:0px;
	padding-left:0px;
	padding-right:0px;
	margin-bottom:0px;
	padding-bottom:5px;
}
#footer li {
	display:inline;
	margin-left:0px;
}
#footer a:link, a:visited {
	color:#666666;	
	padding-left:5px;
	padding-right:5px;
	text-decoration:none;
}
#footer a:hover {
	color:#4978D8;
	text-decoration:underline;
}
#legal {
	width:100%;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}
#legal ul {	
	text-transform:capitalize;
	list-style-type:none;
	margin-left:0px;
	margin-top:0px;
	padding-left:0px;
	padding-right:0px;
	margin-bottom:0px;	
}
#legal li {
	display:inline;
	margin-left:0px;	
	margin-right:0px;	
	padding-left:5px;
	padding-right:5px;
	border-right:1px solid #CCCCCC;
}
#legal a:link, a:visited {
	color:#666666;
	text-decoration:none;
}
#legal a:hover {
	color:#4978D8;
	text-decoration:underline;
}
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 	content: "."; 
 	display: block; 
	height: 0; 
 	clear: both; 
 	visibility: hidden;
} 
.clearfix{
	display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix{
	height: 1%;
}
.clearfix{
	display: block;
}
/* End hide from IE-mac */   
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{
	display:none;
} 

/*hide the right column when printing*/ 
#rightcol{
	display:none;
} 
#twocols, #maincol{	
	width:100%; float:none;
}
}

I am about ready to give up and go back to using tables if I cant get this to work, so any help would be greatly appreciated.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

3 fixed column layout, with right column fixed

not tested, but shouldn't this:

html, body
   {
   height: 100%;
   overflow: auto;
   }
div.cart {
   position: absolute;
}
be something like this:
html {
    overflow: hidden;
    }

body {
    height: 100%;
    overflow: auto;
    }

div.cart {
    position: absolute;
    }

    

gerardkcohen
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2005-11-21
Posts: 13
Points: 0

3 fixed column layout, with right column fixed

Thank you for the reply!

I tried and it is still doing the same thing.

Any other suggestions?

gerardkcohen
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2005-11-21
Posts: 13
Points: 0

3 fixed column layout, with right column fixed

Can anyone help me out with this? I still havent figured it out.