dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: Equalize div height

Hybrid View

  1. #1
    Join Date
    Sep 2005
    Posts
    11

    Question [Resolved] Equalize div height

    Hi all,

    Is it possible to equalize the heights of two diffs, which are beside each other?

    I have two divs beside each other, called divLeft and divRight. Sometimes, divLeft contains more lines of content, and sometimes divRight contains more lines of content. However, I would like that, if divLeft has a bigger height, divRights' height is copied from divLeft and visa versa.

    Is this possible with CSS, or can this only be achieved with DOM Javascript?
    Last edited by keesvandieren; 09-05-2006 at 04:05 PM.

  2. #2
    Join Date
    Jan 2005
    Location
    USA
    Posts
    6,176
    Why don't you assign the two divs the same class for the measurement styles (the styles based on percentages of the screen, rather than content), then assign another class for the design styles. You can have more than one name in a class.
    <div class="measure design">

    KDLA

  3. #3
    Join Date
    Sep 2005
    Posts
    11
    Quote Originally Posted by KDLA
    Why don't you assign the two divs the same class for the measurement styles (the styles based on percentages of the screen, rather than content), then assign another class for the design styles. You can have more than one name in a class.
    <div class="measure design">

    KDLA
    Well, the height grows if there is more content. So I would like not to define the height explicit. For this website, I prefer to use the browserwindow scrollbar.

    I've just searched on Google, and found a better description of the problem here.

    However, the solution on that page uses intrusive javascript. It also says that their is no CSS solution for this.

    If this is true, I'll make a javascript solution myself which is non-intrusive (based on css classes).

  4. #4
    Join Date
    Sep 2005
    Posts
    11

    Going to create a Javascript solution

    I think I'm going to create a Javascript solution.

    The (x)html code can be:
    <div id="column1" class="equalizeHeight columnSet1">
    ...
    </div>

    <div id="column2" class="equalizeHeight columnSet1">
    ...
    </div>

    <div id="column3" class="equalizeHeight columnSet2">
    ...
    </div>

    <div id="column4" class="equalizeHeight columnSet2">
    ...
    </div>

    How the javascript works:
    - it will loop through all divs, if class equalizeHeight is found, it will be handled
    - the second CSS class of the element, can be used to group columns; all columns will get the height, from the div in this group with the biggest height.

    The Javascript will equalize height of (column1 and column2), and (column3 and column4).

    Do you think this is a useful solution?

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    well, hm... I tried also to find a quite similar simple CSS method (I know how to do it with javascript, but it does not worth) regarding the max-height CSS attribute (which IE does not follow). By short the problem can be reduced at:

    How can you persuade a div to take the dynamic gained length of it's parent? CSS crossbrowser solution. I'd like also to know the answer.
    Last edited by Kor; 09-01-2006 at 04:39 PM.

  6. #6
    Join Date
    Jan 2005
    Location
    USA
    Posts
    6,176
    Could you not develop a javascript which compares the two heights/widths, then changes, through assigning style attributes of each, to equalize them? The style change would override the previous CSS settings....

    KDLA

  7. #7
    Join Date
    Jan 2005
    Location
    USA
    Posts
    6,176
    Sounds good to me! Might be a pain if someone has the javascript turned off, but that's usually rare.

    This might be a dumb question, but why are you wanting them equalized? Could not "faking" equal divs through a tiled background image which repeats based on the longest div in the group be another alternative? (the columns are floated on either side and the center is absolutely positioned)....

  8. #8
    Join Date
    Sep 2005
    Posts
    11
    Quote Originally Posted by KDLA
    Sounds good to me! Might be a pain if someone has the javascript turned off, but that's usually rare.

    This might be a dumb question, but why are you wanting them equalized? Could not "faking" equal divs through a tiled background image which repeats based on the longest div in the group be another alternative? (the columns are floated on either side and the center is absolutely positioned)....
    Thanks for the tip, but using a background image which gives the left div the right background color, makes changing the layout with css not possible; a new background image needs to be created, when change on layout is needed.

  9. #9
    Join Date
    May 2006
    Posts
    135
    is this about max-height in i.e correct?

    if so try this mabye.

    Code:
    /* for browsers that understand */
    .MyClassSelector{
    max-height: 60px;
    }
    /* for i.e 6 */
    * html .MyClassSelector {
    height:expression(
    this.scrollHeight > 60? "60px" : "auto" );
    overflow:hidden;
    }

  10. #10
    Join Date
    Sep 2005
    Posts
    11

    Smile Javascript solution finished

    I have made a first version of the javascript solution, it is available from here.

    X library is obligatory, and is also checked in: click

    An example of usage is in svn as well: click
    Last edited by keesvandieren; 09-02-2006 at 06:00 AM. Reason: Added x library dependency

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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