Question

I am making a very simple blog for my PHP project, but am having a simple problem. I can’t get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:

HTML:

<div id="header">
    <img src="images/banner.jpg" alt="banner" title="Prairie"/>
    <img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>

CSS:

#header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 120px;
    background: url(images/banner_right.jpg) repeat-x;
    z-index: 1;
}
#header.right_image {
    float: right;
    position: fixed;
    top: 0px;
    z-index: 1;
}

What is the issue here?

Thanks for any input.

Answer 1

You should separate #header.right_image so that it is #header .right_image

Also remove position: fixed from #header.right_image

This works:

#header .right_image {
    float: right;
}

Example: http://jsfiddle.net/FTBWU/