We help IT Professionals succeed at work.

Placing text next to an image inside a div

TrialUser
TrialUser asked
on
260 Views
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">
                        <ItemTemplate>      
                            <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>
                                </a>                                                               
                            </asp:Panel>       
                        </ItemTemplate>   
                  </asp:Repeater>

Open in new window

Comment
Watch Question

Senior Software Engineer
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

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

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

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

Easynow

Author

Commented:
thx that worked
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.