[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 251
  • Last Modified:

Placing text next to an image inside a div

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

1 Solution
Roman GhermanCommented:
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>
Dean OBrienCommented:
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>

TrialUserAuthor Commented:
thx that worked

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now