Question

My HTML code is

<div id="policydoc" >
    <img src="images/arrowdown.png" />   
    <div id="policytext">Policy</div>  
    <img src="images/arrowdown.png" />   
    <div id="policytext">Receipt</div>  
</div>

i want to make arrow down image and Policy text to align left side and second arrowdown image and receipt text to align right but in the same line.I want all these two images and two texts in the same line.Can any one help me to arrange it? Thanks in advance.

Answer 1

Hope this is what you want fiddle

html

<div id="policydoc" >
    <div class="left">
        <img src="images/arrowdown.png" />   
        <div class="policytext">Policy</div>
    </div>
    <div class="right">    
        <img src="images/arrowdown.png" />   
        <div  class="policytext">Receipt</div> 
    </div>
</div>​

css

.policytext{
  display: inline-block;
}
.left{
   float:left;
}
.right{
   float:right;
}​