Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Repeat background to fill height

    Hi all,
    I have to divs inside a wrapper, one floated left, the other right (so a two column layout). The background on these two divs repeat vertically. The problem is I would like both sides to repeat the same height depending on the other...And what I mean by that is if there is a lot of information in the right div and the background repeats a far way down...I would like the left div to repeat the same length as well. How do you do this?
    Thanks, Matt

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I haven't looked into faux columns for a while so maybe what i will suggest is similar or identical.

    Give you main div a background colour. make each internal div have background: inherit

    then if each or either div runs longer than the other, the background colour will run down more, making it look like all is normal.

    bazz

  • #3
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't quite know what you mean? You mean have the wrapper div have a background color and then the two floated left and right divs inside the wrapper have height:inherit? The problem is I'm using images as backgrounds that have drop shadows, so a background color wouldn't work...

    Here's a link to it:

    http://homepages.nyu.edu/~mlm440/thissideup/

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts


    Welll at least FF and IE 7 are consistent But i don't see a connection

    I se what apears to be an image - "this side up" and then I see what appears to be another div with a white background.

    why not make 'this side up' be an image with the drop shadow and make the background colour of each div be #fff; ?

    bazz

  • #5
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I wasn't clear enough...

    Look below the This Side Up logo. That whole top portion (the height of the This Side Up logo) is a header so disregard that, I'm not having a problem with that.

    Below that I have two divs, one floated left and one floated right and they are both inside a wrapper div. They both have background images (that have a white background, but also include a drop shadow on the right or left respectively so that the drop shadow drops over the background of the document).

    The div I have floated right has a height of 400px and the background image is repeated vertically so that it fills up the 400px. The div on the left, however, I have not set a height. This is because I would like this sides background to repeat vertically to the height of whatever the div on the right is. The problem is the div on the left will not repeat the background to the height of the right div...but that's what I want it to do. So if I add extra information the right div, the left div will lengthen respectively.

    Does this make it clearer? I want both divs backgrounds to repeat the same height dynamically...so if I have more infomation in one and it lengthens that div, I want the div on the opposite side to also lengthen (and repeat its background) to that same height.

    Thanks, Matt

  • #6
    New Coder
    Join Date
    Mar 2007
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Javascript, that is my suggestion. I'm not sure if you want to use js but I think it would be your best bet.

  • #7
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is JS the only way? I would rather not use JS...

    What about this:

    http://articles.techrepublic.com.com...2-5268973.html

    I don't really understand it and tried it quickly but didn't seem to work...does this seem like a viable option?

  • #8
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I was able to figure it out.

    I followed this html source:

    http://www.ejeliot.com/samples/equal...example-4.html

    Putting this code in the inside divs:
    Code:
    margin-bottom: -2000px; padding-bottom: 2000px;
    and then overflow:hidden in the wrapper div.

    Worked like a charm!


  •  

    Posting Permissions

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