Placing text next to an image inside a div

Posted on 2011-04-26
Last Modified: 2012-08-13
I have a div inside which I display a an image and some text to the right with the attached code.

When the text can't fit into one line the text flows into the second line. When this happens the text is not in the same horizontal position as the first line, instead it starts right below the image itself. In the attached screen shot I would like the "Supplies" to be right beneath "Data Storage Media" and "Accesories to be right beneath "transacription".

Please help. May be I need to move away from using anchors and span to do this or is there anway I can adjust the style to achieve this.

Thanks in advance screenshot
<asp:Repeater ID="rptSearchCat" runat="server" Visible="false">
                            <asp:Panel ID="pnlSearchCat" runat="server"  CssClass="divSearchCat2">
                                <a href="<%# DataBinder.Eval(Container.DataItem, "CategoryUrl") %>">
                                    <img alt='Category2' src="/Assets/Images/Products/EPST027201_1_1.JPG" 
                                    style="width:30px;height:30px;border:none;vertical-align:middle;" />
                                    <span><%# DataBinder.Eval(Container.DataItem, "Category2Name")%></span>

Open in new window

Question by:TrialUser
    LVL 9

    Accepted Solution

    try instead of:

    <span><%# DataBinder.Eval(Container.DataItem, "Category2Name")%></span>

    to put it into a div:

    <div style='display:block;'><%# DataBinder.Eval(Container.DataItem, "Category2Name")%></div>
    LVL 12

    Expert Comment

    by:Dean OBrien
    You will need to place both the image and the text in separate DIVs, give width/height and float left:

    .imgHolder {width:50px;height:50px;display:block;float:left}
    .txtHolder {width:200px;height:50px;display:block;float:left}

    <div class="imgHolder"><img></div><div class=" txtHolder">xxx</div>


    Author Closing Comment

    thx that worked

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now