NamePros
Welcome, Guest! Ready to make a name for yourself in the domain business? We welcome both the hobbyist and professional domainer to join the discussion as part of the NamePros community.

Click here to create your profile to start earning reputation for posting, and trader ratings for buying & selling in our free e-marketplace. Build your trader rating with each successful sale. Our system has tracked over 100,000 sales and counting!
FAQ & TOS Register Search Today's Posts Mark Forums Read

Go Back   NamePros.com > Website Development Discussion Forums > Programming
Reload this Page css 3 column layout

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

Advanced Search


Closed Thread
 
LinkBack Thread Tools
Old 12-19-2006, 01:59 PM THREAD STARTER               #1 (permalink)
Munky Designs
Join Date: May 2005
Posts: 996
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, 02:27 PM   #2 (permalink)
NamePros Regular
 
w1ww's Avatar
Join Date: Oct 2006
Location: Mars.
Posts: 439
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, 05:24 PM   #3 (permalink)
Gaz
NamePros Member
Join Date: Dec 2006
Location: Plymouth
Posts: 27
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, 06:19 PM THREAD STARTER               #4 (permalink)
Munky Designs
Join Date: May 2005
Posts: 996
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.
????: NamePros.com http://www.namepros.com/programming/271072-css-3-column-layout.html

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, 08:59 PM   #5 (permalink)
NamePros Regular
 
baxter's Avatar
Join Date: Apr 2006
Posts: 363
baxter is just really nicebaxter is just really nicebaxter is just really nicebaxter is just really nice
 


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';
			}
		}
	}
}
__________________
Canadian Domain Registrar Ready.ca
baxter is offline  
Old 12-20-2006, 11:42 AM THREAD STARTER               #6 (permalink)
Munky Designs
Join Date: May 2005
Posts: 996
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


Liquid Web Smart Servers  
All times are GMT -7. The time now is 06:33 PM.

Managed Web Hosting by Liquid Web
Domain name forum recommended by Domaining.com Powered by: vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.6.0 Ad Management plugin by RedTyger