| |||||||
| Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics. |
![]() |
| | LinkBack | Thread Tools |
| | #1 (permalink) |
| Munky Designs | 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 |
| |
| | #3 (permalink) |
| NamePros Member | 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.
__________________ dramaticRED - My Online Portfolio |
| |
| | #4 (permalink) | |
| Munky Designs | Quote:
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! | |
| |
| | #5 (permalink) |
| NamePros Regular | 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 |
| |
![]() |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| |