#1
  1. Only the strong survives!!.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Feb 2003
    Location
    A World of wonders.
    Posts
    5,583
    Rep Power
    408

    Expandable Div's with css


    I was wondering... how can i make divs expandable so like when there is text that goes over the height limit.. now can i make the div move down abit.. along with the rest of the divs? I have never done this.. and im searching as i go.. so hopefully i can find some results.

    html Code:
    <form action="memo.read.php" method="post">
     <div class="memo_container">
      <div class="memo_userinfo">
       <span class="info">&nbsp;<b />From:</b> <?php print $username; ?></span>
       <span class="userdata"><?php print $icq . $aim; ?></span>
      </div>
      <div class="memo_subject"><span class="span" valign="bottom"><i>Subject: <?php print "{$rtv_memo['subject']} - {$rtv_memo['date']}"; ?></i></span></div>
      <div class="memo_contents"><span class="message"><?php print $rtv_memo['message']; ?></span></div>
      <div class="memo_buttons" align="right"><input type="submit" name="delete" value="Delete"><input type="submit" name="reply" value="Reply">&nbsp;</div>
     </div>
    </form>


    css Code:
     
    /* Starting Memo Div Classes */
     
    div.memo_container {
       position:    relative;
       margin-left: 20px;
       width:       580px;
       height:      432px;
    }
     
    div.memo_subject {
       position:      absolute;
       border-top:    1px solid #cccccc;
       border-right:  1px solid #cccccc;
       left:          152px;
       width:         425px;
       height:        20px;
       background:    #ffffff;
    }
     
    div.memo_subject .span {
       position:       absolute;
       padding-left:   8px;
       margin-top:     8px;
       height:         10px;
       word-wrap:      break-word;
       font-family:    arial,helvetica;
       color:          #00000c;
       font-size:      72%;
    }
     
    div.memo_userinfo {
       position:    absolute;
       float:       left;
       border:      1px solid #cccccc;
       width:       150px;
       height:      150px;
       word-wrap:   break-word;
       white-space: wrap;
       background:  #d8d9d7;
    }
     
    div.memo_userinfo .info {
       position:     absolute;
       padding-left: 2px;
       margin-top:   8px;
       font-size:    88%;
    }
     
    div.memo_userinfo .userdata {
       position:     absolute;
       top:          130px;
       padding-left: 2px;
       font-size:    88%;
    }
     
    div.memo_contents {
       position:      absolute;
       float          right;
       border-right:  1px solid #cccccc;
       border-bottom: 1px solid #cccccc;
       border-top:    1px solid #cccccc;
       left:          150px;
       top:           20px;
       width:         427px;
       height:        130px;
       word-wrap:     break-word;
       white-space:   wrap;
    }
     
    div.memo_contents .message {
       position:       absolute;
       padding-left:   10px;
       margin-top:     2px;
    }
     
    div.memo_buttons {
       position:      absolute;
       top:           152px;
       width:         577px;
       height:        25px;
       border-right:  1px solid #cccccc;
       border-left:   1px solid #cccccc;
       border-bottom: 1px solid #cccccc;
       background:    #ffffff;
    }
     
    div.memo_buttons input {
       height: 22px;
       margin-top:     2px;
    }
    So far everything here works.. but just needed to know if it is possiable what i am asking.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,135
    Rep Power
    4305
    Sounds like you want to use min-height.

    Only elements related to <table>s have a valign attribute.
    It's best to avoid using the align attribute on <div>s; use CSS instead.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Only the strong survives!!.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Feb 2003
    Location
    A World of wonders.
    Posts
    5,583
    Rep Power
    408
    Originally Posted by Kravvitz
    Sounds like you want to use min-height.

    Only elements related to <table>s have a valign attribute.
    It's best to avoid using the align attribute on <div>s; use CSS instead.
    I tried using css to align the buttons to the right.. but for some reason it didnt work.. unless i did something wrong i used vertical-align: right, but i will give it a shoot again....
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Posts
    427
    Rep Power
    44
    There is no vertical-align:right. You use that to vertically align things.
    <b />From:</b>
    That's not right. Get rid of the slash in the first <b>
  8. #5
  9. Only the strong survives!!.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Feb 2003
    Location
    A World of wonders.
    Posts
    5,583
    Rep Power
    408
    Originally Posted by icantthinkofone
    There is no vertical-align:right. You use that to vertically align things. That's not right. Get rid of the slash in the first <b>
    No that's correct I'm planing on implementing XHTML on this.. but first i need to get it right
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    MA
    Posts
    170
    Rep Power
    25
    no, it's not correct. xhtml only needs a closing slash on single tag elements (hr, br, meta, link, img) - but you shouldn't be using a presentational tag to begin with!

    to answer your question - do nothing. Use static positioning and default div behavior which will expand to contain it's in flow children. Lose the relative and absolute positioning and learn to work with the document flow.
  12. #7
  13. Only the strong survives!!.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Feb 2003
    Location
    A World of wonders.
    Posts
    5,583
    Rep Power
    408
    hmm i though i added <br /> not <b /> umm.. ok.. that is my mistake.. on my script its.. <br /> not <b />, weird.. but.. anyways.. i dont use div's im learning to use them now... but anyways.. your saying that i should just make it static width and height? if so.. then no i need it expandable.. there has to be a way of doing it... if i can't find an answer here.. then i guess i will keep trying and post back when I have it.. else.. when what exactly do you mean?
    Last edited by xlordt; April 11th, 2006 at 07:54 PM.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,135
    Rep Power
    4305
    Don't use absolute positioning. Just use margins and floats and give the elements min-height instead of height.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. Only the strong survives!!.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Feb 2003
    Location
    A World of wonders.
    Posts
    5,583
    Rep Power
    408
    Originally Posted by Kravvitz
    Don't use absolute positioning. Just use margins and floats and give the elements min-height instead of height.
    Ok, i will try that.
  18. #10
  19. Only the strong survives!!.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Feb 2003
    Location
    A World of wonders.
    Posts
    5,583
    Rep Power
    408
    Originally Posted by Kravvitz
    Don't use absolute positioning. Just use margins and floats and give the elements min-height instead of height.
    Ok i see what you mean now... but i think i didn't explain my self correctly what i exactly want.. sorry for this... let me try again.... here is what I'm trying to achieve..

    Now Lets say.. i have a left, right, bottom div inside a div's container.... now if the left div was to go over its max min-height there for it shall move down correct? ( Ya thanx for that min-height ) now.. what if i wanted the right div to move down as well.. also as you can see here the bottom div should be able to move down as well. Now that is what I'm trying to do.. Forgive my lack of explanation as I'm really frustrated and sick ( high fever, yet i cant keep in bed ).
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,135
    Rep Power
    4305
    You'll need to clear the floats. I suggest you put the bottom div inside the container and give it clear:both.

    You may want to use one of these two techniques as well:
    http://www.alistapart.com/articles/fauxcolumns/
    http://www.positioniseverything.net/...ut/equalheight

    In other situations where an element isn't already there where you need floats to be cleared, I recommend clearing options 1 and 2 listed on this page.
    More information:
    http://garyblue.port5.com/webdev/floatdemo.html
    http://www.quirksmode.org/css/clearing.html
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo