As a small project to help me learn php I'm developing this image script where the user uploads an image and others comment on it. When it comes to displaying of the images and comments, however I'm looking to achieve with CSS what I've done with tables. However, as you're reading this it's safe to assume that I haven't really achieved much, as my CSS skills suck badly. The page displays the thumbnail with the original post made by the person who uploaded the image. Then, the comments about the picture are posted directly underneath this one. The trick though, is that should the initial comment be longer than the width of the thumbnail, it must not wrap around it; it should continue down past the image without breaking the "block" it is in. The same goes for any of the other comments. Should the initial post be shorter than the height of the image, and a comment (which is displayed under the initial post by default) should then run past the bottom of the image, it also mustn't wrap around to the left and must carry on straight down in a block. I'll give the html code using tables so you can see what I mean. Can anyone help me do the same with CSS? <html> <head> <title>Untitled Document</title> </head> <body> <img src="" width="178" height="250" hspace="20" border="0"align="left"></a><table border=0><tr><td> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> </td></tr></table> <table border=0><tr><td bgcolor="#CCCCCC"> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p> </td></tr></table> <table border=0><tr><td bgcolor="#CCCCCC"> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> </td></tr></table> <table border=0><tr><td bgcolor="#CCCCCC"> <p>Text Text Text Text Text Text Text Text Text Text </p> </td></tr></table> </body> </html> HTML:
I would reccomend using Div's instead of tables than you can apply the sizes in an external style sheet. <div id="div1">Content</div> <div id="div2">Content</div> HTML: CSS #div1 { float: left; width: #; height: #; } #div2 { float: right; width: #; height: #; } Code (markup): Ryan
here is the code you need to add widths hieght and everything to get it where you want. This is just to simple columns. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #1 { float: left; } #2 { float: right; } </style> </head> <body> <div id="1">Text</div> <div id="2">Text</div> </body> </html> HTML: