Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Div Height Auto Adjust by Specific Increment

  1. #1
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Div Height Auto Adjust by Specific Increment

    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.

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Do you have a code i can look at?

  3. #3
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.
    Code:
    #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.

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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?

  5. #5
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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-...ific-increment

    Any help would be appreciated.

  6. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

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

    Code:
    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.

  7. The Following User Says Thank You to Deadweight For This Useful Post:

    tua33450 (09-15-2011)

  8. #7
    Join Date
    Dec 2004
    Posts
    177
    Thanks
    0
    Thanked 18 Times in 17 Posts

    Default

    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.
    Verzeihung!

  9. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

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

  10. #9
    Join Date
    Dec 2004
    Posts
    177
    Thanks
    0
    Thanked 18 Times in 17 Posts

    Default

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

    Code:
    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.
    Last edited by Minos; 08-18-2011 at 02:30 PM.
    Verzeihung!

  11. The Following User Says Thank You to Minos For This Useful Post:

    tua33450 (09-15-2011)

  12. #10
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Talking

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

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •