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 Design a vista like button using CSS

    how to make text transparent without changing to an image using css

    How to smooth emboss in css

    JQuery: Creating boxed text that shows on top of a div on hover

    How to center CSS-shapes within a wrapper in a row

    How do I animate background image size on hover smoothly in css?

    CSS HTML how to ignore some css for non ie7 or ie8

    how to deselect the active span element?

    How to set a box on bottom of a box?

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    How to hide a parent div if an inner div has a certain class, with javascript

    How can I make the background of an HTML div black?

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    How to set parent div height to self adapt to the inner div height?

    How to append an
  • to a
      and set css on the
    • at the same time with jquery
  • How to add “android_asset/www/” to the image's path in the CSS only if app is running in Android?

    How to get crossing CSS borders

    How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

    how to align in centre using html css

    css: How to select first anchor tag inside table

    How to change image size when nested in

    tag

    How to add and remove div's (input)

    How to scale content for displays keeping the ratio [closed]

    how to center two div in xs

    How can I center this textbox using CSS?

    How to vertically center div in floated div?

    How to scroll content automatically using CSS? [closed]

    How do I make a paragraph of text display as a square/rectangle in CSS

    How to convert columns to rows using CSS

    how to remove small space that only appear in iphone browser