Nexy Posted July 12, 2008 Share Posted July 12, 2008 Why Hello There! I've tried countless way to do this: From the red rectangle on top, I want it so its always on the bottom rectangle. Of course there is no way of knowing how big the message above will be. So as the message grows the red rectangle goes more down as well. Here's the code: <table class='margin'> <tr> <td style='vertical-align: top'> <div class='pm_msgbody'> <p>Test</p> Avatar <p>Gold | Rep</p> </div> </td> <td style='vertical-align: top'> <div class='pm_msgtext'> <div style='border-bottom: 1px solid #000; margin: 0'> PM Topic --- Date </div> <div style='text-align: left; margin-bottom: .4em'>Message</div> <div class='pm_msgans'> Quote PM | Ping Shoutbox <div class='pm_msgrep'> Delete | Reply </div> </div> </div> </td> </tr> </table> And the CSS: .margin { margin-left: auto; margin-right: auto; } .pm_msgbody { width: 180px; color: #ADD8E6; font-size: .9em; } .pm_msgtext { width: 500px; color: #ADD8E6; font-size: .9em; padding: .2em; } .pm_msgans { text-align: left; border-top: 1px solid #000; } .pm_msgrep { display: inline; margin-left: 19.8em; } The part I want moved down is: <div class='pm_msgans'> Quote PM | Ping Shoutbox <div class='pm_msgrep'> Delete | Reply </div> Any help would be appreciated. Thank You! Quote Link to comment Share on other sites More sharing options...
xtopolis Posted July 12, 2008 Share Posted July 12, 2008 Hey Nexy, So I didn't have a login to your forum so I couldn't see the rest of the code, so the stuff I post below might not work with the rest of your styles. Anyway, the main thing I did was change: - div[pm_msgans] to contain 2 <p> tags instead of a div inside a div., then I floated one of them to the left, and the other to the right. - your message div has a margin-bottom: .4em, change that to padding-bottom .4em (fixes ie small spacing at bottom bug) Note: I've only tested this in FF3, and IE7 Here's the code to look through, obviously only take what you need to fix yours. Let me know if it works. <html> <head> <style type="text/css"> * {margin: 0; padding: 0;} td { vertical-align: top; cellspacing: 0; cellpadding: 0;} td.avatars { border: 1px solid black; width: 200px;} td.msgbody { vertical-align: top; width: 500px; border: 1px solid black;} p.pm_msgquote {float: left;} p.pm_msgrep { float: right;} div.pm_msgcont { text-align: left; padding-bottom: .6em;} </style> <body> <table> <tr> <td class="avatars"> <div class='pm_msgbody'> <p>Test</p> Avatar <p>Gold | Rep</p> </div><!--pm_msgbody--> </td> <!-- message section --> <td class="msgbody"> <div class='pm_msgtext'> <div style='border-bottom: 1px solid #000; margin: 0'> PM Topic --- Date </div> <div class="pm_msgcont">Message Message Messagege </div> <div class='pm_msgans'> <p class="pm_msgquote">Quote PM | Ping Shoutbox</p> <p class='pm_msgrep'> Delete | Reply </p> </div><!-- message ans--> </div><!-- pm _msgtext--> </td><!-- msg--> </tr> </table> </body> </head> </html> Quote Link to comment Share on other sites More sharing options...
Nexy Posted July 13, 2008 Author Share Posted July 13, 2008 Thanks for the reply, all that did was move it down with < p >, it's still not on the bottom. You said, you couldn't login to the forums. It's actually a PM layout. You can login with Iori/testtest. You will notice you have 1 "PM(1)". http://divnx.net Here's what I did to the code: <table class='margin'> <tr> <td style='vertical-align: top'> <div class='pm_msgbody'> <p>Test</p> Avatar <p>Gold | Rep</p> </div> </td> <td style='vertical-align: top'> <div class='pm_msgtext'> <div style='border-bottom: 1px solid #000; margin: 0'> PM Topic --- Date </div> <div style='text-align: left; padding-bottom: .4em'>Message</div> <div class='pm_msgans'> <p class='left'>Quote PM | Ping Shoutbox</p> <p class='right'>Delete | Reply</p> </div> </div> </td> </tr> </table> Unless I misunderstood your explantion, it didn't seem to work. Also, if I was unclear before, I always want this to appear on the bottom and only move more down if the message is long enough. Thank You! Quote Link to comment Share on other sites More sharing options...
xtopolis Posted July 13, 2008 Share Posted July 13, 2008 I looked at your code and found that the thing that it doesn't like seems to lie in the first <td> that contains your avatar. If you take away the <br /> and the <p>s it works like you seem to want it to. If you add <br />s to the 2nd <td> for the message portion of it, it pushes it down to the bottom. Basically, it's right by just having the bottom portion be 2 <p>s float left and right, but for some reason the spacing on the <td> with the avatar is making the 2nd one act weird. I can't work on this anymore atm, but I'd be happy to take a look at it tomorrow. At least now you know what's causing the spacing thing. Play around with it, let me know what you get. Sorry I couldn't help more atm. Quote Link to comment Share on other sites More sharing options...
Nexy Posted July 13, 2008 Author Share Posted July 13, 2008 Thank You, I'll play with it and see what happens. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.