Databases
StackOverflow2013
Postsdbo
POHow can I use CSS to make a div float over my text whilst remaining in the right spot?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I use CSS to make a div float over my text whilst remaining in the right spot?
    text
    copied!<p>This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using</p> <p><code>margin: 0px auto;</code></p> <p>In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.</p> <p>I have two test pages currently uploaded:</p> <p><a href="http://nathanbunn.kodingen.com/test/divpostest1.html" rel="nofollow">Test 1</a> - This displays the Options div in the correct place (set using <code>float: right;</code>), but when I roll over it, the content wraps around the reiszed div.</p> <p><a href="http://nathanbunn.kodingen.com/test/divpostest2.html" rel="nofollow">Test 2</a> - This makes sure my div floats over my content, but it is set using <code>position: absolute</code>, and it remains at the top right hand corner of the page.</p> <p>I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload