I am trying to create the above layout in css, but sadly I can't. The only way (it seems) I can create it is with tables, and I don't want to use tables. I need to incorporate standard way scripting and not of using tables for hacks other than for tabular diagram. So, I tried with ul tags, but I just can't make it. The picture box always jumps out of the container <ul> container. I need both the picture and the comment panels to appear in the the same frame. I started out with this <html><head><style> ul#show_comment{width:400px; border:1px solid #CCC;} ul#show_comment li.user_img{background-color:#efefef; float:left; width:80px;} ul#show_comment li.user_comment{background-color:#efefef; width:315px; float:right} </style></head><body> <ul id="show_comment"> <li class="user_img"> ##<br/>##<br/>##<br/> </li> <!-- this is a box for displaying the image --> <li class="user_comment"> This is a comment box, seen to the right of the picture attached. </li> <!-- this is a box for displaying the comment --> </ul> HTML:
I would use <div> instead of <ul> <li> and set all of them float left. Give the first div with fixed width and the second div would appear as you desired.
To show you the clear layout structure I have written HTML and inline CSS coding for the layout design. * ----------------------------------------------------------------------------------------------- * <html> <head> </head> <body> <div style="width:410px;height:58px;border:1px solid red;"> <div style="width:63px;height:58px;border:1px solid blue;float:left;background:yellow;"> <div style="width:53px;height:53px;border:1px solid blue;backgroundink;margin:2px 1px 1px 4px;"> <!-- Call the image Path here--> </div> </div> <div style="width:341px;height:58px;border:1px solid green;float:right;"> <div style="font-family:arial; font-size:11px;"> <b>montpelier28 .,</b> Stowe. VT <br/> Vermont Chicken Out, afraid of Big Bad Monstano's money, (and many <br/> others just easy to point out Monsanto).<br/> </div> </div> </div> </body> </html> *----------------------------------------------------------------------------------------------* Result: ------ For your reference I have not included the Img src path tag in the above codings.
<html> <head> </head> <body> <div style="width:410px;height:58px;border:1px solid red;"> <div style="width:63px;height:58px;border:1px solid blue;float:left;background:yellow;"> <div style="width:53px;height:53px;border:1px solid blue;backgroundink;margin:2px 1px 1px 4px;"> <!-- Call the image Path here--> </div> </div> <div style="width:341px;height:58px;border:1px solid green;float:right;"> <div style="font-family:arial; font-size:11px;"> <b>montpelier28 .,</b> Stowe. VT <br/> Vermont Chicken Out, afraid of Big Bad Monstano's money, (and many <br/> others just easy to point out Monsanto).<br/> </div> </div> </div> </body> </html> HTML: If you could duplicate the above code two three times that is only the div containers ( Since there will be many outputted comments) You will notice the image box will only stay at the top, messing the whole code. I have tried that once, and that is why I said, the image box jumps out of the container. Just try it, in your note pad, and you will see what I am saying. It may seem easy to create this thing, but it is hard.
I think it's probably an issue with the float. Instead of floating multiple DIVs, float the main outer container and use margins for the rest. Also if that doesn't work, try simply using <img src="" align="left"> or <img src="" style="float:left;"> Alternatively which I don't like but each to their own, use the position absolute feature.