Gamerz Posted April 14, 2010 Share Posted April 14, 2010 So I have this image viewer that lets users views images AND add comments on the same page. I would like the image on one side, and the comments on the other side. See now, I have this done in Firefox. It works 100% on Firefox, but there were problems in Internet Explorer. In IE, the two items was all on one side, top and bottom (Image was on top, while comments script was added on bottom somehow. So how do I make it so that the two items are aligned side by side, on IE as well? HTML Code: <html> <head> <title></title> <style type="text/css"> h1 {padding-bottom:3px; margin:0px; font-family:arial; font-size:1.1em; line-height:1.2em; letter-spacing:0; text-align:left; word-spacing:normal; text-decoration:none; color:#252525;} body { font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:11px; } </style> </head> <body> <div style="float:left;margin-right:15px;"> <b>coupon.gif</b><br> <a href="coupon.gif">Download coupon.gif</a> - <a href="full/coupon.gif">View Full Version of Image</a><hr><a href="1/coupon.gif"><img src="thumbnails/coupon.gif" alt="coupon.gif" title="coupon.gif" border="0"/> </a><br /><br /></div> <div style="float:left;width:340px;"> <div style="padding:10px 0 5px 0"> <div style="margin-left:20px"> <h1>Comments on this image</h1> <form method="post" action="commentfile/coupon.gif" style="margin-top:20px;"> <p><font color='red'>No Comments Available.<br>Be the first to comment this image below.</font></p> <ul style="margin:0;padding:0"> </ul> <h1>Add your comment:</h1> <p> <textarea name="message" id="message" cols="60" rows="5" style="margin: 0 0 5px 0;"></textarea><br /> <input type="submit" name="post" class="submit" value="Post comment" /> <p>Note: Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.<br><br> No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text. </p> </p> </form> </div> </div> </body> </html> Firefox Screenshot (The one I am trying to accomplish.) Internet Explorer ScreenShot (The one that is NOT working.) See the difference? So how do I make both IE and Firefox...so that the two are side by side just like Firefox? Here is the Firefox ScreenShot (The one I am trying to do.) Quote Link to comment https://forums.phpfreaks.com/topic/198521-css-two-items-aligned-side-by-side/ Share on other sites More sharing options...
nano Posted April 14, 2010 Share Posted April 14, 2010 Could you put a fixed width on the first div? That will then make room for the second one to float Quote Link to comment https://forums.phpfreaks.com/topic/198521-css-two-items-aligned-side-by-side/#findComment-1041711 Share on other sites More sharing options...
Gamerz Posted April 14, 2010 Author Share Posted April 14, 2010 How would I code that? Quote Link to comment https://forums.phpfreaks.com/topic/198521-css-two-items-aligned-side-by-side/#findComment-1041718 Share on other sites More sharing options...
nano Posted April 14, 2010 Share Posted April 14, 2010 <div style="float:left;margin-right:15px;width:200px;"> <b>coupon.gif</b><br> <a href="coupon.gif">Download coupon.gif</a> - <a href="full/coupon.gif">View Full Version of Image</a> <hr> <a href="1/coupon.gif"><img src="thumbnails/coupon.gif" alt="coupon.gif" title="coupon.gif" border="0"/> </a> <br /><br /> </div> Though for a semantic markup - you should look to stick you styles in a stylesheet Quote Link to comment https://forums.phpfreaks.com/topic/198521-css-two-items-aligned-side-by-side/#findComment-1041733 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.