3 replies [Last post]
Aka Gambit
Offline
newbie
Last seen: 12 years 16 weeks ago
Timezone: GMT-4
Joined: 2009-09-29
Posts: 2
Points: 2

Hello all, I have been working on the same problem for a few weeks now and have tried to solve it myself but have had no luck so I resorted to looking for help online here.

I am working on a 3 column layout for a website, it also has a header and a footer. In the middle of the header and footer are the 3 columns, 2 side columns (right and left) and a center column. Now both side columns and the header and foot work fine and how I want them but the center column does not. I want the center column to add scroll bars when it gets too long (when the bottom meets the same height as the side columns) however all it does is stretch the center column.

I have tried many ways of solving this switching from Framesets, Table, Div, CSS+Div, CSS+Div+Table, CSS+Table, CSS+Framesets+Div, CSS+Framesets+Table, Frameset+Table, Framesets+Div etc. But it all resulted in the same error or a different one. (layout disordered)

I remember a while ago that I had done the same thing so simply but for some reason I can not get it to work now. Hopefully I am just overlooking something.

I have viewed the site on Firefox, Google Chrome, and IE8.

I have used various code but I will post up the last one I used and hopefully someone can help.

HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout testing</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<div class="header">
	<!-- Header start -->
 
		<img src="images/Header2.png">
 
	<!-- Header end -->
</div>
<!-- Columns start -->
<div class="colmask threecol">
	<div class="colmid">
		<div class="colleft">
			<div class="col1" style="background:images/Interrior2.png">
				<!-- Column 1 (Center) start -->
 
				<div style="height:20%;">
					<center>
						<a href="temp.html">About Us</a> | <a href="temp.html">
						News</a> | <a href="temp.html">Articles</a> | <a href="temp.html">
						Videos</a> | <a href="temp.html">Behind Scenes</a> | <a href="temp.html">
						Media</a> | <a href="temp.html">Lifestyles</a> | <a href="temp.html">
						Store</a>
					</center>
				</div>
					<center>
						Main content will go here.<br>
						<font face="courier new" size="5">
						&#9555;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9576;&#9576;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9558;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9553;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9553;<br>
						&#9561;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9564;<br>
						</font>
						More Content Here.<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
						And Here...<br>
					</center>
				<!-- Column 1 (Center) end -->
			</div>
			<div class="col2">
				<!-- Column 2 (Left) start -->
 
					<img src=images/LeftSide2.png>
 
				<!-- Column 2 (Left) end -->
			</div>
			<div class="col3">
				<!-- Column 3 (Right) start -->
 
					<img src=images/RightSide2.png>
 
				<!-- Column 3 (Right) end -->
			</div>
		</div>
	</div>
</div>
<!-- Columns end -->
<div class="footer">
	<!-- Footer start -->
 
		<img src=images/Footer2.png>
 
	<!-- Footer end -->
</div>
</body>
</html>

CSS

	/* <!-- */
	/* General styles */
	body {
		margin:0;
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		width:100%;
		background:#fff;
		min-width:600px;		/* Minimum width of layout - remove line if not required */
								/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
	}
	/* Header styles */
	#header {
		clear:both;
		float:left;
		width:100%;
		margin:0;
		padding:0;
		border:0;
	}
	#header p {
		padding:0 0 0 0;
		margin:0;
	}
	#header h1,
	#header h2 {
		padding:0 0 0 0;
		margin:0;
	}
	#header ul {
		clear:left;
		float:left;
		width:100%;
		list-style:none;
		margin:0 0 0 0;
		padding:0;
	}
	#header ul li {
		display:inline;
		list-style:none;
		margin:0;
		padding:0;
	}
	#header ul li a {
		display:block;
		float:left;
		margin:0 0 0 0;
		padding:0 0;
		text-align:center;
		background:#eee;
		color:#000;
		text-decoration:none;
		position:relative;
		left:0px;
		line-height:0em;
	}
	#header ul li a:hover {
		background:#369;
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover {
		color:#fff;
		background:#000;
		font-weight:bold;
	}
	#header ul li a span {
		display:block;
	}
	/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:0 solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;	/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
	float:left;
	position:relative;
	padding:0 0 0 0;	/* no left and right padding on columns, we just make them narrower instead 
							only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
	}
	/* 3 Column settings */
	.threecol {
		background:#fff;	/* right column background colour */
	}
	.threecol .colmid {
		right:15%;			/* width of the right column */
		background:#fff;	/* center column background colour */
	}
	.threecol .colleft {
		right:70%;			/* width of the middle column */
		background:#fff;	/* left column background colour */
	}
	.threecol .col1 {
		width:70%;			/* width of center column content (column width minus padding on either side) */
		left:100%;			/* 100% plus left padding of center column */
	}
	.threecol .col2 {
		width:15%;			/* Width of left column content (column width minus padding on either side) */
		left:15%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}
	.threecol .col3 {
		width:15%;			/* Width of right column content (column width minus padding on either side) */
		left:85%;			/* Please make note of the brackets here:
							(100% - left column width) plus (center column left and right padding) plus 
							(left column left and right padding) plus (right column left padding) */
	}
	/* Footer styles */
	#footer {
		clear:both;
		float:left;
		width:100%;
	}
	#footer p {
		padding:0px;
		margin:0;
	}
 
	/* Navigation Bar styles */
	#navbar {
		clear:both;
		float:left;
		width:100%;
		text-align:center;
	}
 
	/* Page Body styles */
	#bmain {
		clear:both;
		float:left;
		width:100%;
	}
	/* --> */

I had also looked on here and searched around here and other sites and modified/replaced my code trying to get it to work so now its not much near what I started with.

Thanks in advance.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 6 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Try This

I haven't had time to run it through it's paces in IE. But I think it would probably hold.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style>
 #container
{
margin: 0 auto;
width:1000px;
border-style:dotted;
border-color:#F00;
}
 
 .text_one
{
padding:10px;
text-align:justify;
}
 .header
{
width:900px;
margin:10px auto;
text-align:justify;
border-style:solid;
border-color:black;
}
 
 .left_column
{
display:inline;
float:left;
width:390px;
margin:0 0 0 48px;
text-align:justify;
border-style:solid;
border-color:black;
}
 
.right_column
{
float:left;
width:280px;
height:300px;
overflow:auto;
margin:0 0 0 8px;
border-style:solid;
border-color:black;
display:inline;
}
.far_right_column
{
float:left;
width:200px;
margin:0px 0 0 8px;
border-style:solid;
border-color:black;
display:inline;
}
#footer
{
display:inline-block;
width:900px;
margin:10px 50px;
text-align:justify;
border-style:solid;
border-color:black;
}
 
 
</style>
<!-- all style declarations above this line -->
 
</head>
 
<body>
<div id = "container">
	<div class = "header"><div class = "text_one">HEADER:<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum.    </div></div>
 
<div class = "left_column"><div class = "text_one">LEFT COLUMN:<br/>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam id neque a diam bibendum tempor. Vivamus laoreet, turpis in tristique elementum, enim mauris molestie erat, ac pretium nibh odio eget dolor. Nam lacinia mauris id metus euismod mattis feugiat lorem vestibulum.luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In   Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam id neque a diam bibendum tempor. Vivamus laoreet, turpis in tristique elementum, enim mauris molestie erat, ac pretium nibh odio eget dolor. Nam lacinia mauris id metus euismod mattis feugiat lorem vestibulum.luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In  
 
</div></div>
 
<div class = "right_column"> 
	<div class = "text_one"> RIGHT COLUMN:<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend 
</div>
</div>
 
<div class = "far_right_column"> 
	<div class = "text_one"> RIGHT COLUMN:<br/>
 rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend 
</div>
</div>
 
<div id = "footer"><div class = "text_one">FOOTER:<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus.</div></div>
 
</div>	
</body>
</html>

Aka Gambit
Offline
newbie
Last seen: 12 years 16 weeks ago
Timezone: GMT-4
Joined: 2009-09-29
Posts: 2
Points: 2

Thank you for the quick reply.

I guess I should have mentioned one critical element that I am pretty sure botches the whole thing up for me.

You see I am trying to have it so there is no "fixed" height and width.

I want it so that if someone is running 800*600 screen resolution, it will fit nicely on their browser, and if someone views the same page running 1280*800(Widescreen), 1280*720, 1024*768 or any other higher resolution that the page can still be viewed with it fitting inside the browser and filling up the whole browser window. But also so that if the window is resized all elements of the layout resize with it.

This part is easily done with the CSS+Div layout, however I want the center column to use scroll bars when the content gets to be too large. (So instead of stretching the div I want it to scroll.)

I hope this is making sense.

I believe what is happening in my code is that I have two divs with "100%" and it gets confused about he overflow, thinking that it is always at "100%" no matter what.

I am not very knowledgeable about divs as I only recently started making changes from frames and/or tables to css and divs (I only used css+div in forum designs).

So if they automatically resize or something that I am not getting then if someone could let me know, then that would be nice.

I hope someone can understand what I am trying to do. I am having a hard time explaining it.

EDIT: I found this site from another forum www.web-zonez.com and its what I want to do, but I am not sure as to how its doing it...But I found code so for now this problem is solved...I think.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 6 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

My .02

I really have no I idea what you want to do. It sounds to me like it will be more trouble than its worth and likely unstable.