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?

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 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. Commented Jul 8, 2013 at 19:31

1 Answer 1

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>

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.