Div Height Auto Adjust by Specific Increment

[tua33450]

Hello. I'm not sure if this is possible with just css, but I have hope.

I have a div that auto adjusts its height by the height of its content. The catch is that I have bg images that need to align in a certain way, so I would like the div to expand by a specific increment. So, everytime the bg image is tiled vertically, the entire image will show.

Let's say that I have a bg image that is 20px high. If the content is 70px high, the div height should auto adjust to 80 (a multiple of 20). Is there a way to do this with css (preferred)? How about with JS? Hopefully I explained that with some coherence - thanks in advance for any help.

[Deadweight]

Do you have a code i can look at?

[tua33450]

Sure, I don't want to post the whole site's main stylesheet, but I'll give you an example. I don't know if this will actually be helpful.


#wrapper {
width: 960px;
margin: 0 auto;
}

#outer {
width: 100%;
background-image: url('../images/bg.png');
background-repeat: repeat-y;
height: auto;
}

#inner {
width: 90%;
}


So 'inner' will have content in it and will be housed inside of 'outer'. I want outer's height to expand depending upon how much content is in inner, but I want the entire bg image (which will repeat vertically) to be shown. So, if the content is 30px high, but my bg image is 20px high, the div will expand to 40 px, not stay at 30px. I hope that makes sense.

[Deadweight]

Wait let me get this right
You have a background image that is repeating and you have another image inside that div? But the image inside the div is 30px but you want the div to actually be 40px?

[tua33450]

No, it's not quite that complicated.

I have a div with a bg image that is repeating. Inside that div is text. I would like the div to automatically adjust with the height of the text - but only by 20px increments. If I just let it just auto-adjust its height, my footer will not fit well under the bg image. So, I need the entire bg image to show on each vertical repeat. So, my bg image is 20px high. But, if the text equals out to 70px, the div should stretch to 80px - so that the entire bg image can be displayed.

I may not be explaining this well, but this person had the same issue: http://doctype.com/any-way-increase-hieght-div-specific-increment

Any help would be appreciated.

[Deadweight]

If i knew Javascript much better i think it can work.
I think this is the best way to explain if using do loops


x = 45 /*Size of image*/
z = 1 /*Standard Counting Loop*/
y = 20 /*background size*/

If x > y Then
Do until x < y
z += 1
y = 20 * z
Loop

Else

y = backgroundofdiv


I can be completely wrong in my idea because im not extremely pro with JavaScript. I do know that JavaScript doesnt work like that so ofc my code is incorrect. Also that will have to reload the page each time you change the image.

[Minos]

Short answer: It cannot be done with only CSS, but if you create a script you could get the effect you are looking for.

If that is the route you want to take I will work on a sample for ya.

[Deadweight]

Yeah it will have to be done with JS. =\

[Minos]

Sample JS code (not the most elegant, but it will work).



function divCalc(){
var bgHeight=150;
var obj = document.getElementById("rptr");
var oldHeight = obj.clientHeight;
if (oldHeight < bgHeight){
obj.style.height = bgHeight + 'px';
}else{
if (oldHeight % bgHeight != 0) obj.style.height = oldHeight + (bgHeight - (oldHeight % bgHeight)) + 'px';
}
}

window.onload = divCalc;


A div with id="rptr" is what I used to test, with a 150px image. I'm just posting the first thing I tried that worked, I'm sure it can be refined.

[tua33450]

@ Minos - Thanks so much! It worked perfectly! I definitely appreciate the help. :D

@ Crazykld69 - Thanks for the script. I have no idea whether it worked, because I tried Minos' code first, lol. :)

[Minos]

Not a problem, and I'm glad it worked. I got to use my favorite programming operator...too many people underestimate the modulus operation :)