3 Column Issue - very frustrating

[Nicky_uk]

Hi everybody

I've have (seriously) been battling with CSS to try and get a 3 column layout (with separate header and footer) to all be equal lengths for about 4 days now! I am very new to CSS and used to building with Ta.... no, better not say that word.

I have looked at the CSS for the thread with a thousand posts in, but even that didn't help me (and to be honest, I didn't fancy looking through over a thousand posts to see if there was a similar issue (which there probably was) my head is bursting with it all at the moment.

So, I was hoping someone here could shed some light on what the problem might be to fix this issue.

The CSS is :

@charset "utf-8";
/* CSS Document */

html, body {min-height:100%;padding:0; margin:0;}



body {
        margin:0;
		padding-top: 20px ;
		padding-bottom:0;
		padding-left: 0;
		padding-right: 0;
		background-color:#000;
		font-size: 95%; 
		font-family:Verdana, Arial, Helvetica, sans-serif;
		width:100%;
		background-image:url(images/bg2.jpg);
		background-repeat:repeat-x;
		}
		
/* =====================
HEADER LAYOUT 
========================*/		
		
#header {
		height:150px;
		margin:0;
		padding:0;	}	
		
		
#header .slogan {
		background-color: transparent;
		float:right;
		margin-left:20px;
		margin-top: 5px;
		margin-right:20px;
		margin-bottom:0;
		padding:0;	
		}
		
#header .logo {
		float:left;
		margin-left: 30px;
		margin-top: 40px;
		margin-right:30px;
		margin-bottom:0;

		}
		
div#nav_newsletter {
		height:100px;
        position:absolute;
		margin-top:245px;
		margin-left:160px;
		margin-bottom:0;
		margin-right:0;
		padding:0;
	
		}
		
/* =====================
HEADER IMAGES
========================*/
		
#logo {
		

		height: 30px;
		}
		
#nav {
		position:absolute;
		margin-top: 240px;
		margin-right:auto;
		margin-bottom: 0;
		margin-left: 470px;
		height:50px;
		padding:0;
		}
		
/* =====================
MAIN BODY LAYOUT/TEXT 
========================*/

#wrapper {

	width:1000px;
	margin-top:170px;
	margin-right:auto;
	margin-bottom: 1px;
	margin-left:auto;
	text-align:left;
	min-height:100%;
	padding: 0;

		}
		
#content {
		width:980px;
		background-color:#ffffff;
		padding-bottom:50px;
		padding-left:0;
		padding-right:0;
		padding-top:0;
		margin:0;
	
		}
		
	
#maincol h3{
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		}
		
h3{
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#333333;
		}

#leftcol {
		position:relative;
		min-height:100%;
		float:left;
		width:200px;
		background:url(images/left-top-corner.jpg) left top no-repeat;
		background-color:#F1FADC;
		
		}
		
#leftcol .bkimg {

		margin-left:30px;
		margin-top:auto;
		margin-bottom:auto;
		margin-right:0;
		padding:0;
		background-position:bottom left;
		
		
		
		}
		
#midcol {
		position:relative;
		float:left;
		width:220px;
		padding-top:20px;
		padding-right:0;
		padding-bottom:4px;
		padding-left: 20px;
		background-image:url(images/mainbg.gif);
		background-repeat: repeat-y ;
		min-height:100%;
		margin:0;
		}
		
#div midcol p {
		font-family:Arial, Helvetica, sans-serif;
		font-size:9px;
		}

		

				
		
#maincol {
		z-index:1;
		position:relative;
		background-color:#FFFFFF;
		float:right;
		width:482px;
		height:100%;
		}
		
#clear {
		clear:both;
		}
/*css for common-pg-----------------------------------------------*/




.page-bottom-corners{
		width:980px; 
		float:left;
		margin-top:-5px;
		margin-right:0;
		margin-bottom:auto;
		margin-left:0;
		
		}
		



		
/* =====================
LISTS
========================*/	
ul {
	list-style: none;

	}
	
.floatright { 

float: right; }

#box {width:400px;}
		
#content ul {
		left:auto;
		margin-top:auto;
		margin-right:0;
		margin-bottom:auto;
		margin-left:0;
		list-style:none;
		padding:0;
		}
		
#content ul li {
		list-style:none;
		width:200px;
		height:23px;
		list-style-type:none;
		margin-top:-5px;
		margin-right:0;
		margin-bottom:auto;
		margin-left:10px;
		font-size:12px;
		
		}
		
#content ul li a{
		margin-top:0;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
		display:block;
		padding-top:0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left:15px;
		text-decoration:none;
		font-weight:normal;
		list-style:none;
		

		}
		
#content ul li a:link, #content ul li a:visited, #content ul li a:active {
		color:#333333;
		list-style:none;
		}
		
#content ul li a:hover {
		color:#FF9900;
		list-style:none;
	
		}
		

	
/* =====================
GENERAL TEXT/HEADERS 
========================*/

		
		
h1#header span {display:none;}
		
h1#header {
		background-image:url(images/mbheader.png);
		background-repeat:no-repeat;
		height:35px;
		margin-left:90px;
		margin-top:20px;
		margin-right:auto;
		margin-bottom:auto;
		padding-top:0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		}
		
h1 {
		font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:16px;
		color:#669900;
		margin-top:10px;
		margin-right: 20px;
		margin-bottom: 10px;
		margin-left: 10px;
		padding-top:0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		}
		
h2 {
		font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:14px;
		margin-top:10px;
		margin-right: 20px;
		margin-bottom: 10px;
		margin-left: 10px;
		padding-top:0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		color:#333333;
		border-bottom: solid thin #999999;
		width:450px;
		}
		
p		{
		position:relative;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		margin-top:10px;
		margin-right: 20px;
		margin-bottom: 10px;
		margin-left: 10px;
		padding-top:0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		color:#333333;
		}
		
h1#news {
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#fff;
		margin-top:0;
		margin-right:auto;
		margin-bottom: 0;
		margin-left: auto;
		padding-top:0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		}
		
h1#news span {
		font-size: 12px;
		color: #FFCC00;
		}
		
	

/**********************
*   FOOTER/BOTTOM            *
***********************/

#bottom {
		
		clear: both;
		float: left;
		width: 100%;
		height: 300px;
		margin-top:80px;
		margin-right:auto;
		margin-bottom: 0;
		margin-left:auto; 
		padding-top: 10px;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		background:url(images/darkimage.png)  no-repeat;
		background-position:bottom left;
		font-size: 12px;
		text-align: left;
		background-color:#494949;
		color: #fff;
	}
	
#bottom-links {
		background-image:url(images/footertop.gif);
		background-repeat:repeat-x;
		height:58px;
		margin-top:-10px;
		margin-right:0;
		margin-bottom:0;
		margin-left:0;
		padding-top:10px;
		padding-left:200px;
		padding-bottom:0;
		padding-right:0;
		}	
		
#bottom a:link, a:visited {
		color:#669900;
		}
		
#bottom a:hover {
		color:#FFFFFF;
		}

	
	
#bottom-divs {
		float: left;
		clear: both;
		margin-top:0;
		margin-right:auto;
		margin-bottom: 0;
		margin-left:auto; 
		padding-top: 50px;
		padding-bottom:50px;
		padding-left:50px;
		padding-right:50px;
	}
	
#bottom-left, #bottom-mid, #bottom-right {
		width: 200px;
		padding-top: 50px;
		padding-right: 0;
		padding-bottom: 20px;
		padding-left: 150px;
		float: left;
		margin-top:0;
		margin-right:auto;
		margin-bottom: 0;
		margin-left:auto; 
	}
	
#bottom-left {
		

		margin-top:0;
		margin-right:auto;
		margin-bottom: 0;
		margin-left:auto; 
		padding-top:40px;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 150px;
		}
		
#bottom-mid {
		

		margin-top:0;
		margin-right:auto;
		margin-bottom: 0;
		margin-left:auto; 
		padding-top:40px;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 100px;
		}
		
#bottom-right {
		

		margin-top:0;
		margin-right:auto;
		margin-bottom: 0;
		margin-left:auto; 
		padding-top:40px;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 100px;
		}
		
#bottom h2 {
		margin-top:0;
		margin-right:auto;
		margin-bottom: 10px;
		margin-left:auto; 
		padding-top: 0;
		padding-right: 8px;
		padding-bottom: 0;
		padding-left: 0;
		font-size: 1.6em;
		color: #fff;
	}
	
#bottom h2 span {
		color: #888;
	}
	
#bottom ul {
		margin-top:0;
		margin-right:auto;
		margin-bottom: 0;
		margin-left:auto; 
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		list-style-type: none;
		border-top: 1px solid #555;
	}
	
#bottom ul li {
		line-height: 26px;
		border-bottom: 1px solid #555;
		margin-top:0;
		margin-right:auto;
		margin-bottom: 0;
		margin-left:auto; 
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
	}
	
#bottom ul li a {
		display: block;
        margin:0;
		padding-top: 10px;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		color: #fff;
		text-decoration: none;
	}
	
#bottom ul li a:hover {
		background: #191919;
	}
	
#bottom-sep {
		clear: both;
}

#bottom h1 {
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:14px;
		border-top: medium #669900 solid;
		border-bottom: thin #666666 solid;
		color:#fff;
		padding-top:10px;
		padding-bottom:10px;
		padding-left:0;
		padding-right:0;
                          margin:0;
                          }

Main elements are:

Leftcol - Midcol - Maincol

URL is michaelbarrymore.net/new/index.php

IE and FF show different (surprise) but both pretty much have the same issue as leftcol and midcol are not equal to the maincol.

Thanks loads for looking and any help is much appreciated.

Nicky

[brdnwi]

I've never created a 3 column layout, so I just tried. It works. You have three columns.

<div style='float:left; border:0px solid black; width:66%; height:100%;'>

<div style='float:left; border:1px solid red; width:49%; height:100%;'>
</div>

<div style='float:right; border:1px solid red; width:49%; height:100%;'>
</div>

</div>

<div style='float:right; border:1px solid black; width:33%; height:100%;'>
</div>

[Nicky_uk]

Well, thanks for trying - but it didn't quite work unfortunately.

I added a background color to the first div which the following 2 divs followed, however, not the last div for some reason.

++++++
ADDED

Although by checking out your script and floating the content element, it did at least give me the main back ground color - just still not making each element to be equal lengths for some reason.

[Paul O'B]

I've never created a 3 column layout, so I just tried. It works. You have three columns.

lol - If only things were that simple.

You cannot equalize columns simply by adding height:100% to them. Your example would only work in IE and only when it was in quirks mode. Even then the columns would only be 100% initially. If the content exceeds the viewport the columns would be unequal again.

I have looked at the CSS for the thread with a thousand posts in, but even that didn't help me (and to be honest, I didn't fancy looking through over a thousand posts to see if there was a similar issue

Hi Nicky, welcome to Sitepoint

You didn't need to read all 1000 posts you just needed to read my one post and follow the demonstration link which explains all the issues.

You simply cannot equalize columns by setting a 100% height on them as already mentioned above. Read the faq on 100% for a thorough understanding of how 100% works and the implications of it. You will very rarely use 100% height in your layouts as it will limit the layout to 100% only.

The only element that will bases its height on an unrelated element is a table cell. Therefore all other css methods are slightly more complicated because CSS does not do this by default.

If your page is a fixed width (which it looks to be) then simply use a background image to create the column illusion.

e.g.

This 3 column layout is created by repeating this image on the outer. If you don't want to use an image the you will have to use a much more complicated method such as this or this.

If that's all too much for you then use a simple 3 celled table until you understand fully how this all works. I recommend just using the background image method as it is so simple.

More examples;
http://www.pmob.co.uk/temp/3col-cent...late-round.htm
http://www.pmob.co.uk/temp/3col-rounded.htm

Hope that helps

[Nicky_uk]

Thanks Paul

I didn't mean anything by not reading the whole thread although I did look at some sample CSS from the examples to see if there were any hints on what I was doing wrong - but didn't spot anything.

The reason I am not using one image for a background is because I am trying to get an image behind another image effect. The midcol has a green background which was initially a part of the one image background, but I wanted to add an image which displayed at the bottom of the leftnav but hid a section of the image so it appear it was peeping out from the midcol background - which of course I could accomplish with a one image background so opted to use a different image for the midcol background (I hope Im not making this sound too complicated)

It would be alot simpler to use the one image background and may end up giving up and trying that option instead.

[brdnwi]

Paul got me again. He's always right.

I've modified my code. Still three divs. Only one div has a height and it's fixed. No 100% stuff here. I only gave two divs a background-color. The red background is the background of the body. It will flow with the rest of page.

<html>

<body style='background-color:red; margin:0px;'>

<div style='float:left; background-color:white; border:0px solid black; width:66%;'>

<div style='float:left; background-color:blue; border:0px solid red; width:49%; height:1000px;'>
</div>

<div style='float:right; border:0px solid red; width:49%; height:100%;'>
</div>

</div>

</html>

WHOA, MY CODE LOOKS LIKE THE FRENCH FLAG!

[Nicky_uk]

Thanks both for your help - I've spent hours trying to figure this out and now opted once again for the one image background and cut the image I wanted to peep out behind another image (which has given the desired affect anyway - why do we try and complicate things?)

I still have the issue with trying to get the image on the leftcol to align to the bottom of the content - Im assuming it is because the element itself isnt flowing to the end of the content -but looks like I have some reading and more testing to do.

Thanks again for your help.

[Nicky_uk]

P.S Brdnwi - when I've tried height:1000px; it has meant that the element will not stretch past that amount. So if I have 1500px worth of content, it didn't work.

[Paul O'B]

HI Nicky,

Heres a simple example using your image

http://www.pmob.co.uk/temp/nickyuk.htm

You can still add other images and rub bits out that you don't need. I'd need to see an image of what you wanted and I could suggest a possible solution.

Paul got me again. He's always right.

You noticed that as well

Although I wish it was simple there really is no simple way of equalising columns other than using images. Otherwise why would my 3 col thread have had over 100,000 views

[Nicky_uk]

Otherwise why would my 3 col thread have had over 100,000 views

Because we like to complicate things...lol

I've used the one image background now and have the desired effect both in FF and IE (Yipee)

My issue now is to try and get an image I have on the leftcol to scroll to the bottom of the page.

I have tried background-position:bottom; as well as background-attachment etc, but nothing seems to work.

I have also tried adding the image to the content element as I know that scrolls to the bottom of the page, but still - it didnt work

P.S.

I removed all the height:100%; and guess what? Nothing broke..lol - Thanks again.

Thanks so much for your help

[Paul O'B]

I have also tried adding the image to the content element as I know that scrolls to the bottom of the page, but still - it didnt work

You have to think out of the box

Either put your image there by using an element that is below the column (i.e. outside the wrapper that holds all the columns) and simply drag it back upwards into place with a negative margin.

Alternatively use absolute positioning and place it relative the the parent wrapper again.

http://www.pmob.co.uk/temp/text-at-bottom3.htm

Or use the same method I put the round corners on the bottom here:

http://www.pmob.co.uk/temp/3col-rounded.htm

You are only limited by your own imagination

[Nicky_uk]

Ya see, all it takes is someone to point you in the right direction!! Im really chuffed - its sorted

Yes, limited imagination when you are unsure of how everything works and trying to get everything straight in your head - but I guess its a good way to learn - by making mistakes.

Thanks loads for your help - I really appreciate it

I basically floated the image and place the div in the wrapper only and then used -bottom margin to make it in line with the bottom content - and it scrolls with the rest of the page!

Well happy now.. .thanks again