Float a div right, without impacting on design

Question

I want to float a div to the right at the top of my page. It contains a 50px square image, but currently it impacts on the layout of the top 50px on the page.

Currently its:

<div style="float: right;">   ... </div> 

I tried z-index as I thought that would be the answer, but I couldn't get it going.

I know it's something simple I'm missing, but I just can't seem to nail it.

Answer 1

What do you mean by impacts? Content will flow around a float. That's how they work.

If you want it to appear above your design, try setting:

z-index: 10;   position: absolute;   right: 0;   top: 0; 

Answer 2

If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:

position:absolute; right:0; top:0; 

If you want it to float at the right of a particular parent section, you can add position: relative to that section.