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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Balancing Div Tags

    Hi, hope someone can see an answer here. I have 4 div tags which are hidden to begin with from the css as shown below:
    Code:
    #story1 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;}
    #story2 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;}
    #story3 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;}
    #story4 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;}
    The contents of these is pulled out of a db and so the quantity of text changes (within certain parameters) and so the size of the divs changes, hence no height: setting.

    I know I could get around this by setting an absolute height and using overflow to show a scrollbar but I would rather not have a scrollbar as the amount of text will only be 100-200 words.

    Elsewhere I have used the following script to equalise div tags

    Code:
    if (document.getElementById("member1").offsetHeight < document.getElementById("member2").offsetHeight){
    		document.getElementById("member1").style.height = document.getElementById("member2").offsetHeight + "px";
    	}
    	else {
    		document.getElementById("member2").style.height = document.getElementById("member1").offsetHeight + "px";
    	}
    I tried this for my div tags but because they initially start with display:none it sets the height of them to zero. Is there a simple way to make all of these the same height whilst they are hidden?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm, nice trick. I forgot to mention in the OP, only one div will be visible at any one time. I suspect it might end up being a set height with a scroll bar.


  •  

    Posting Permissions

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