My code below gives me a problem, the image comes after the text

My code below gives me a problem, the image comes after the text I tryed changing round what goes first but if I place the div.innerhtml near the end I get no images when I load the page. As you can see in the image ive uploaded the Img is being set to the end of the text im also wondering is there a way I can cut the size down?

        public partial class UserProfileWall : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        string theUserId = Session["UserID"].ToString();
        PopulateWallPosts(theUserId);
    }
    private void PopulateWallPosts(string userId)
    {

        using (OdbcConnection cn = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver}; Server=localhost; Database=gymwebsite2; User=****; Password=****;"))
        {
            cn.Open();
            using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn))
            {
                using (OdbcDataReader reader = cmd.ExecuteReader())
                {


                    var divHtml = new System.Text.StringBuilder();
                    while (reader.Read())
                    {
                        System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                        div.ID = "test";
                        div.InnerHtml = String.Format("{0}", reader.GetString(0));
                        Image img = new Image();
                        img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
                        img.AlternateText = "Test image";
                        div.Controls.Add(img);
                        test1.Controls.Add(div);

                    }
                }
            }
        }
    }





    protected void Button1_Click(object sender, EventArgs e)
    {
        string theUserId = Session["UserID"].ToString();
        using (OdbcConnection cn = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver}; Server=<REMOVED>; Database=<REMOVED>; User=<REMOVED>; Password=<REMOVED>;"))
        {
            cn.Open();
            using (OdbcCommand cmd = new OdbcCommand("INSERT INTO WallPosting (UserID, Wallpostings) VALUES (" + theUserId + ", '" + TextBox1.Text + "')", cn))
            {
                cmd.ExecuteNonQuery();
            }
        }
        PopulateWallPosts(theUserId);
    }
}

<asp:Content ID="Content1" ContentP开发者_开发问答laceHolderID="head" Runat="Server">
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<p>
    <asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3" 
        Height="47px" Width="638px"></asp:TextBox>
</p>
<p>
    <asp:Button ID="Button1" runat="server" Text="Post Message" Width="98px" 
        onclick="Button1_Click" />
    </p>
<p>
    &nbsp;</p>

<div id="test1" runat="server" />







</asp:Content>

Im trying to achieve this: (crop from paint)

ignore the web ui parts!

div#test1 {
}
#test> img
{
    float: left;
    height: 100px; /* You shouldn't resize images here. Should be done in C#*/
}
#test > div
{
width:90%; 
z-index:1; 
padding:27.5px; 
border-top: thin solid #736F6E;
border-bottom: thin solid #736F6E;
color:#ffffff;
margin:0 auto;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
}

Tryed this to no success?

Snippet from firebug:

<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test">weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<img style="border-width: 0px;" alt="Test image" src="userdata/2/uploadedimage/batman-for-facebook.jpg"></div>

Any specific reason to inject the divs programmatically? There are databound controls to do the job you are doing. E.g. using Repeater(2.0+) or ListView(3.5+) controls. ListView Control

Here is a bit complex way see if it helps:

System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            div.Style["float"] = "left";
            Image img = new Image();
            img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
            img.AlternateText = "Test image";
            div.Controls.Add(img);
            test1.Controls.Add(div);

            System.Web.UI.HtmlControls.HtmlGenericControl div1 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            div1.InnerText = String.Format("{0}", reader.GetString(0));

            div1.Style["float"] = "left";
            test1.Controls.Add(div1);

            System.Web.UI.HtmlControls.HtmlGenericControl div2 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            div2.Style["clear"] = "both";
            test1.Controls.Add(div2);

Surely using css can reduce few lines above.

1. For the love of God, don't put your passwords inside your post.
2. Do not execute queries purely by string concatenation! Use a parameterized query. If I was able to write data to the session, for example with UserId, I could easily inject SQL into this. Please consider using an ORM tool such as NHibernate or Microsoft's Entity Framework.
3. If you want the image to be to the left, with text beside it, use the code from this link (updated). Essentially on the image you'd want to set the float property to be left.

If you want to change your code, it could be changed into this:

System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");

HtmlGenericControl literal = new HtmlGenericControl("div");
literal.InnerHtml = reader.GetString(0);

Image img = new Image();
img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
img.AlternateText = "Test image";
div.Controls.Add(img);
div.Controls.Add(literal);
test1.Controls.Add(div);

Images and text are inline elements, meaning they flow left-to-right.

If you want to force the image to a new line, use the following:

div.InnerHtml = String.Format("{0}<br />", reader.GetString(0));

As for the image size, you need to upload an image that is sized properly, or you can use the Image object in C# to resize it when it is uploaded.

Why not just add some CSS to float the image to the left?

#test img {
  float: left;
  padding: 5px 10px 5px 0;
}

Try this, add a ASP:placeholder control to the page instead of a div. Then in the code behind constuct three divs one for the image, one for the text, and one to contain both of them.

//create container
        System.Web.UI.HtmlControls.HtmlGenericControl container = new System.Web.UI.HtmlControls.HtmlGenericControl("div");

        //create div to hold the image
        System.Web.UI.HtmlControls.HtmlGenericControl imgDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
        imgDiv.Attributes.Add("class","imgDiv");

        //build the image and set properties.
        Image img = new Image();
        img.Width = new Unit(60);//pixels
        img.Height = new Unit(60);
        img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
        img.AlternateText = "Test image";

        //add image to image div
        imgDiv.Controls.Add(img);

        //create div to hold text
        System.Web.UI.HtmlControls.HtmlGenericControl postText = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
        postText.Attributes.Add("class", "postText");
        postText.InnerHtml = String.Format("{0}", reader.GetString(0));

        //now add the two divs to the page
        test1.Controls.Add(imgDiv);
        test1.Controls.Add(postText);

Now this should render this in HTML:

<div>
    <div id="imgDiv">
        //image

    </div>
    <div id="postText">
        //text    
    </div>    
</div>

then you can use css to float the text next to the image.

.imgDiv{float:left;}
.postText{float:left;}

The text will probably jump down to a new line if the window becomes smaller. You could fix this by setting a minimum width to the container div.