midnite Posted July 3, 2008 Share Posted July 3, 2008 What i want achieve is: (it is simple. i want the content of the chat to be aligned left at the right block) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>chat</title><style type="text/css">.box { border: 1px solid #000; margin: 7px;}.title { text-align: center; text-decoration: underline; margin: 7px;}.txt td:first-child { width: 280px; text-align: right; vertical-align: top;}</style></head><body><div class="box"> <div class="title">box 1</div></div><div class="box"> <div class="title">box 2</div> <div id="msg"> <table class="txt"> <tr> <td>one says:</td> <td>testing testing alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alot</td> </tr> <tr> <td>another says:</td> <td>testing testing alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alot</td> </tr> </table> </div></div><div class="box"> <div class="title">box 3</div></div></body></html> For tableless solution, i have already succeeded at Firefox 2. How ever it does not work it in IE 7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>chat</title><style type="text/css">.box { border: 1px solid #000; margin: 7px;}.title { text-align: center; text-decoration: underline; margin: 7px;}.txt td:first-child { width: 280px; text-align: right; vertical-align: top;} /* added these */label { float: left; text-align: right;}#msg { overflow: auto; }#msg label { width: 280px; }.txt { float: left; margin-left: 300px;}</style></head><body><div class="box"> <div class="title">box 1</div></div><div class="box"> <div class="title">box 2</div> <div id="msg"> <label>one says:</label><span class="txt">testing testing alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alot</span><br /> <label>another says:</label><span class="txt">testing testing alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alotalot alot alot alot alot alot alot alot alot alot alot</span><br /> </div></div><div class="box"> <div class="title">box 3</div></div></body></html> The main problem is the height of the <div> is not tall enough in IE7. The #msg { overflow: auto; } does not work Link to comment Share on other sites More sharing options...
huw008 Posted July 3, 2008 Share Posted July 3, 2008 Thanks my text in my divs dont expand no more. Link to comment Share on other sites More sharing options...
rzea Posted July 3, 2008 Share Posted July 3, 2008 I want the content of the chat to be aligned at right #msg { text-align:right; overflow:auto;} Link to comment Share on other sites More sharing options...
midnite Posted July 3, 2008 Author Share Posted July 3, 2008 #msg { text-align:right; overflow:auto;} Oh, sorry. i said it wrong. It should be: i want the content of the chat to be aligned left at the right block, as the table layout shown Link to comment Share on other sites More sharing options...
rzea Posted July 3, 2008 Share Posted July 3, 2008 I copied your Tables code and your DIVs code to see them working... and I don't understand what you want.What is the 'right block'?I see that in the DIVs code you almost have it done, well, at least the little I understood of what you want.Let me know. Link to comment Share on other sites More sharing options...
midnite Posted July 4, 2008 Author Share Posted July 4, 2008 Ricardo Zea, thanks very much!Alright, what i want to achieve is a layout identical to "the Table code".In Firefox2, "the Div code" works well - almost identical to "the Table code".Yet in IE7 "the Div code", there is a problem. The words in the middle block are going out of its border and overlaps the bottom block. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.