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 Share on other sites More sharing options...
arbitter Posted April 14, 2010 Share Posted April 14, 2010 The screenshots don't seem to be working though... Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted April 15, 2010 Share Posted April 15, 2010 This appears to be a CSS issue and not a HTML issue. Conceptually you have a two-column layout and should treat it as such. I recommend rebuilding the page from scratch in the following manner: 1) Create a container div e.g. <div id="container"></div> 2) Position two divs within your container div e.g. <div id="leftcolumn"></div> and <div id="rightcolumn"></div> 3) Style the divs as required but ensure that the leftcolumn div is floated left and that the rightcolumn div is floated right. I couldn't find float:right; anywhere in your page. 4) Position your content within either of the two divs. Here's a good starting point: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ You can review your current code to death though it'll probably be quicker just to rebuild your page. Also, try using external style sheets, ids and classes. Inline styling, for me at least, defeats the purpose of css. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted April 15, 2010 Share Posted April 15, 2010 Review this if you run into issues with any content following your floated elements: http://www.w3schools.com/css/pr_class_clear.asp Quote Link to comment Share on other sites More sharing options...
oni-kun Posted April 16, 2010 Share Posted April 16, 2010 The left div can float and the right be relative, it should not matter. Be sure IE has enough clear spacing to maintain the position or else it'll just break on you (as in your firefox vs IE example) 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.