Float a div right, without impacting on design.

Question

Hi,

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.

Thanks, Nath

Answer 1

Try setting its position to absolute. That takes it out of the flow of the document.

Answer 2

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 3

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.

Answer 4

This was very helpful. Im trying to put my google adsence search bar in the center of my page. Just what I needed