[advanced search]
 

Go Back   NamePros.com > Discussion > Web Design & Development > Programming

Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics.


Closed Thread
 
LinkBack Thread Tools
Old 12-19-2006, 12:59 PM   #1 (permalink)
Munky Designs
 
Join Date: May 2005
Posts: 997
417.00 NP$ (Donate)

Albino is a jewel in the roughAlbino is a jewel in the roughAlbino is a jewel in the rough


css 3 column layout

ok, this has been bugging me for some time now.

I can make the layout fine. But when one column has more content in than others, they dont match the length/height, and the empty "gap" is filled with the background colour.

to see what I mean, please look at the attached file.

If anyone can help with this, it would be very much appreciated!

Todd
Attached Images
File Type: jpg messup.JPG (23.9 KB, 25 views)
Albino is offline  
Old 12-19-2006, 01:27 PM   #2 (permalink)
NamePros Regular
 
w1ww's Avatar
 
Join Date: Oct 2006
Location: Mars.
Posts: 433
109.50 NP$ (Donate)

w1ww is a jewel in the roughw1ww is a jewel in the roughw1ww is a jewel in the rough


Without the code its hard to help..
__________________
:notme:
w1ww is offline  
Old 12-19-2006, 04:24 PM   #3 (permalink)
Gaz
NamePros Member
 
Join Date: Dec 2006
Location: Plymouth
Posts: 27
5.00 NP$ (Donate)

Gaz is an unknown quantity at this point


PM me with your code, and all your images, as well as your main starting image (not sliced) please send as jpg's or png's no PSD's.
Gaz is offline  
Old 12-19-2006, 05:19 PM   #4 (permalink)
Munky Designs
 
Join Date: May 2005
Posts: 997
417.00 NP$ (Donate)

Albino is a jewel in the roughAlbino is a jewel in the roughAlbino is a jewel in the rough


Quote:
Without the code its hard to help..
It was more of a general question than a specific one, I guess I just figured that everyone had this problem when doing this layout.

All I really need is a way to keep the height of the columns relative to the others.

My site has 3 columns, but 2 are the same size, one is long (due to the layout)

I have attatched the zip file of the pages and images etc anyway, if you could have a gander, I would appreciate it!
Attached Files
File Type: zip css2col.zip (46.4 KB, 2 views)
Albino is offline  
Old 12-19-2006, 07:59 PM   #5 (permalink)
NamePros Regular
 
baxter's Avatar
 
Join Date: Apr 2006
Posts: 289
1,990.00 NP$ (Donate)

baxter is a jewel in the roughbaxter is a jewel in the roughbaxter is a jewel in the rough

Ethan Allen Fund Save The Children
I picked this snippet up somewhere don't remember where but its supposed to lengthen a three column div based on the longest of the three columns. Haven't tested but feel free to.

Code:
function setTall() {
	if (document.getElementById) {
		// the divs array contains references to each column's div element.  
		// Replace 'center' 'right' and 'left' with your own.  
		// Or remove the last one entirely if you've got 2 columns.  Or add another if you've got 4!
		var divs = new Array(document.getElementById('content'), document.getElementById('rc'), document.getElementById('lc'));
		
		// Let's determine the maximum height out of all columns specified
		var maxHeight = 0;
		for (var i = 0; i < divs.length; i++) {
			if (divs[i].offsetHeight > maxHeight) maxHeight = divs[i].offsetHeight;
		}
		
		// Let's set all columns to that maximum height
		for (var i = 0; i < divs.length; i++) {
			divs[i].style.height = maxHeight + 'px';

			// Now, if the browser's in standards-compliant mode, the height property
			// sets the height excluding padding, so we figure the padding out by subtracting the
			// old maxHeight from the new offsetHeight, and compensate!  So it works in Safari AND in IE 5.x
			if (divs[i].offsetHeight > maxHeight) {
				divs[i].style.height = (maxHeight - (divs[i].offsetHeight - maxHeight)) + 'px';
			}
		}
	}
}
__________________
Chimps.ca - Swans.ca - Snails.ca
baxter is offline  
Old 12-20-2006, 10:42 AM   #6 (permalink)
Munky Designs
 
Join Date: May 2005
Posts: 997
417.00 NP$ (Donate)

Albino is a jewel in the roughAlbino is a jewel in the roughAlbino is a jewel in the rough


cheers Baxter, I cant see to get it to work though haha.

Anyone else?
Albino is offline  
Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Site Sponsors
Advertise your business at NamePros

All times are GMT -7. The time now is 07:56 PM.


Powered by: vBulletin® Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
Template-Modifications by TMS
vBCredits v1.4 Copyright ©2007 - 2008, PixelFX Studios

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85