Click to See Complete Forum and Search --> : positioning image besides text


manishrathi
09-29-2009, 11:10 AM
I want a "details" button placed besides the price . So price is on the left in the column and button has to be besides it on the right. I have used following code and style in it.


<style type="text/css">

.bb_placeholder1{ float:left; position:relative; height:50px; margin:20px; fontsize:28px; color: #0c316f; font-family:Arial" }
.bb_placeholder2{ float:right; position:relative; height:40px; margin:20px;}

</style>

<h2 class="bb_title" in-context-edit="dcr_path" dcr-item-paths="<%=title_node%>" >

<% if(!"".equals(link_url) ) {%>

<a href="<%=link_url %>">

<%} %>
<%=title %>
</a>

</h2>


<span class="bb_subtitle" in-context-edit="dcr_path" dcr-item-paths="<%=desc_node%>">
<style>
.bb_content p {
margin:0px 0px;
}
</style>
<%=desc %></span>

<!-- Code below is used to place text and image besides each other -->


<div style="height:70px; width:195px; position:relative">
<p class="bb_placeholder1">
<%=price%>
</p>
<% if(!"".equals(details_image)) {%>
<a href="<%=link_url %>">
<img class="bb_placeholder2" src="<%=details_image%>" />


</a>
<%} %>
</div>
bb_placeholder2 shd align the image to the right, but image is getting placed below the price and its aligned left. I have tried to apply class
bb_placeholder2 to <a> instead of <img>, but still same result. So how to make image go on the right of the price text ? Can we apply style to <a> or <img> or thats a syntax error ?

pls explain

KDLA
09-29-2009, 11:40 AM
img is an inline element. You need to apply "display: block" for it to float properly.