Float a div right, without impacting on design

NikolaiDante picture NikolaiDante · Nov 21, 2008 · Viewed 227.4k times · Source

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

Richard Garside picture Richard Garside · Nov 21, 2008

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;