How to place two labels around an image (dynamically); right and bottom?


Tags: c#,css,asp.net,layout

Problem :

I'm generating a visual list of search results, and I want to format it as such:

Valid XHTML.

I'm not sure how to do this. Here's what it currently looks like

Valid Xhtml.

Here's the code for the web form that I am placing these results in

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Search.</h2>
<div class="searchblock" id="searchdiv" runat="server">

    <asp:Button id="TestSearchButton" runat="server" Text="Search the Stuff" OnClick="TestSearchButton_Click" CssClass="btn-default" />

    <asp:TextBox ID="EnterBox" runat="server" Text="Hittin NM"/>

    <hr/>

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

The results are getting placed in the 'searchResults' div.

Here's the code that I use to generate these result blocks

while (i <= allmantemp.Count - 1)
{
    Panel panel = new Panel();
    panel.CssClass = "ResultPanel";

    System.Web.UI.WebControls.Image img2 = new System.Web.UI.WebControls.Image();
    panel.Controls.Add(img2);
    img2.CssClass = "DisplayedImage";
    img2.ImageUrl = "Resources/allmanmushroom.jpg";

    Label numberBox = new Label();
    panel.Controls.Add(numberBox);
    numberBox.CssClass = "ItemNumberResult";
    numberBox.Text = "Item #:" + allmantemp[i].itemNum.ToString();

    Label titleBox = new Label();
    titleBox.CssClass = "ItemTitleResult";
    titleBox.Text = allmantemp[i].title;

    Label descriptionBox = new Label();
    descriptionBox.CssClass = "DescriptionResult";
    descriptionBox.Text = allmantemp[i].description;

    panel.Controls.Add(numberBox);
    panel.Controls.Add(new LiteralControl("<br />"));
    panel.Controls.Add(titleBox);
    panel.Controls.Add(new LiteralControl("<br />"));
    panel.Controls.Add(new LiteralControl("<br />"));
    panel.Controls.Add(descriptionBox);
    searchResults.Controls.Add(panel);

    i++;

}

And here are the CSS classes referenced

.DisplayedImage{
height: 180px;
width: 180px;
padding-top: initial;
margin-top: 6px;
margin-right: 6px;
margin-left: 6px;
float: left;
}

.ResultPanel{    
margin-left: 210px;
width: auto;
height: 200px;
display: block;
border: solid;
border-color: #DFECE6;
}

.ItemNumberResult{
background-color: #2D2D29;
color: #DFECE6;
margin-bottom: 50px;
margin-top: 10px; 
width: 180px;
}

.ItemTitleResult{
background-color: #2D2D29;
color: #DFECE6;
margin-bottom: 50px;
margin-top: 10px; 
width: 180px;
}

I know the code I have given is will produce the second result; but I have no idea how to make the layout look like I want it to.



Solution :

Floating and clearing .ItemNumberResult should move it below the image and let the other content stay up on the right.

.ItemNumberResult{
    background-color: #2D2D29;
    color: #DFECE6;
    margin-bottom: 50px;
    margin-top: 10px; 
    width: 180px;
    float: left;
    clear: left;
}

    CSS Howto..

    How to stack an overlay over html5 video

    How to make a menu centered using CSS

    How to do page numbering in header/footer htmls with wkhtmltopdf?

    How do I keep my text on one line in Firefox?

    How to detect CSS is turned off with PHP?

    How to fix parent hover issues with CSS?

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to place Facebook send dialog box above other content?

    How to force floating blocks staying in the same row in css?

    How to find address of css and js files?

    My Background image doesn't show up and is not inspected in the browser [closed]

    How can I make this image responsive?

    How to I have a within a
  • align to the right side of the
  • How to make content appear under absolute position

    CSS: How to set up gradient background cross browser (only missing IE8 and IE9)

    How to reverse jQuery css styling?

    how to apply transform rotate all browse in inline css using jquery

    How to apply CSS color on parent element using a color picker?

    CSS :hover - How to get lower DIVs to :hover as well?

    How to clone an element using class name and append it to the body

    how to use css button to post method in a form?

    How can you separate the navigation bar list from the body list?

    How to assign C# variable to CSS class variable in ASP.NET MVC ActionLink

    How to display heading and paragraph elements inline in css?

    How to remove a CSS style on the fly

    How do I hide the items within a menu until a click event?

    How to add 10 pixels to a dynamic top position in CSS using SASS

    How to make a unique line thinner using NVD3

    How do i check if a link has been visited?

    How to override style of single RichFaces component