Linking the Heights of 2 div's

Ask a Question related to Macromedia Dynamic HTML, Design and Development.

  1. #1

    Default Linking the Heights of 2 div's

    I want to link the height of 2 divs that are side by side in the body of my
    website.

    The 1st div's height is determind by the amount of text within it (which can
    change from page to page). The 2nd div will contain a repeat image, which i
    want to grow to whatever size the 1st div is, but I don't know what height
    setting to assign the div's in my CSS document.

    Please can someone help, I'm sure this is very easy but i'm just starting out
    and i'm completely stumped.

    Webbo agogo Guest

  2. Similar Questions and Discussions

    1. Contribute 2 overlapping DIV's
      I'm far from an expert in CSS and layout design. I've got a simple template with left navigation defined in a DIV. Inside that box I've got boxes...
    2. pop-up menu variable heights
      I have a pop-up menu and some of the items are very long. I've found I can insert a break to wrap the line but then I have to change the height...
    3. DIV's and images
      I am using CSS and DIV tags and in serting images for the "wrapping" of the text effect aroud the images. How do you create padding between the...
    4. Adding new div's on a page
      I'm having the same issue here. Its a how stopper for us if we can't get this resolved as we just redesigned our templates to take full advantage of...
    5. Minimum layer/cell heights
      "Sub" DW automatically inserts   (non breaking space I think) into any cells which are empty. Delete this or put a 1x1 pixel image in the...
  3. #2

    Default Re: Linking the Heights of 2 div's

    Make the repeating image the background image in the div with the text, and
    adjust the padding to accomodate the image.

    Inform yourself:
    [url]http://www.blooberry.com/indexdot/css/propindex/colorbg.htm[/url]

    If you don't understand the difference between margins and padding, now's a
    good time to look that up too:
    [url]http://www.meyerweb.com/eric/articles/webrev/199801.html[/url]

    VVebbie Guest

  4. #3

    Default Re: Linking the Heights of 2 div's

    Hello Webbo agogo,
    See the example I made of an equal height 2 column layout -
    [url]http://nopeople.com/CSS/equal_length_columns/[/url]

    To do what you want you'll have to flop the 2 columns, make your background
    image as wide as your right column, put that image as the background of
    #wrapper.
    I don't know how your image will look when the content column cuts half of it
    off because it's not long enough to expose the enire image....

    Use CSS like this:

    background-image: url(..image/picture.jpg);
    background-repeat: repeat-y;
    background-position: right;

    Excavatorak Guest

  5. #4

    Default Re: Linking the Heights of 2 div's

    thanks guys i will look into both of these options.

    It looks like i will have to add a 3rd div on the right side of the text area
    which will include the navigator (which will be made up of 8 images) - do you
    have any ideas which of your 2 options would be best suited to this?

    Webbo agogo Guest

  6. #5

    Default Re: Linking the Heights of 2 div's

    The two-column setup.

    My suggestion is based on the assumption that the "column" has no content, and thus doesn't actually need to be a column.
    VVebbie Guest

  7. #6

    Default Re: Linking the Heights of 2 div's

    Webbo, I put a really simple one here - [url]http://nopeople.com/Webbo/[/url]
    Excavatorak Guest

  8. #7

    Default Re: Linking the Heights of 2 div's

    Thanks for the help guys. And thanks for the example Excavatorak.

    Cheers

    Webbo
    Webbo agogo Guest

Posting Permissions

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139