0

I feel like this is such a simple issues and yet I can't seem to figure out the problem. All I want are two divs to be displayed side by side but yet I keep getting them to display on top of one another.

Here is the code:

 <div style="float:left">
    <h3>Text</h3>
 </div>
 <div style="float:left">
   <apex:outputLink style="text-align: right; float: right;" value="#top" title="Click to return to the top of the page.">
         <apex:image value="{!$Resource.BW_UpArrow}" alt="Arrow image that when clicked will return the user to the top of the page" height="20px" title="Click to return to the top of the page." width="20px" style="border:none;"/>
   </apex:outputLink>
 </div>

There must be something I am overlooking. Any thoughts?

Improve this question
2
  • 1
    This question isn't specifically about Salesforce. Try searching existing StackOverflow questions on CSS alignment. E.g. CSS layout - Aligning two divs side by side
    – Daniel Ballinger
    Commented Jul 8, 2013 at 19:23
  • Yeah, I debated on posting there first, however I wasn't sure if the <apex:outputlink> tags were causing any issues. I actually did figure the answer out from this link however. Just added the 'position' attributes in. Thanks for your help.
    – El Duderino
    Commented Jul 8, 2013 at 19:31

1 Answer 1

Reset to default
0

Adding the "position" attributes fixes this. Thank for the link Daniel

<div style="float:left; position:absolute;">
    <h3>Text</h3>
</div>
<div style="float:left; position:relative">
    <apex:outputLink style="text-align: right; float: right;" value="#top" title="Click to return to the top of the page.">
      <apex:image value="{!$Resource.BW_UpArrow}" alt="Arrow image that when clicked will return the user to the top of the page" height="20px" title="Click to return to the top of the page." width="20px" style="border:none;"/>
    </apex:outputLink>
</div>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .