Small css problem

freecrm

New Member
Messages
629
Reaction score
0
Points
0
Hope this is simple lol.

I have a fairly standard layout with fixed width #wrapper and auto padding left and right.

I am trying to get a status bar div to sit over a header image (z-index 2000), but it is stuck relative to the right of the browser edge.. not the wrapper. In effect, when the browser window increases in size, the general layout borders stretch to suit, but this div stays to the right, moving it off the place I want it to be.

If I set position as relative or static, the div forms it's own box and shunts the other divs down out of position - i.e. not sitting in a layer over the header img.

This statusbar div is between the #wrapper div tags.

css

Code:
.statusbar{
        position: absolute;
        color:#006666;
        width: auto;
        z-index: 2000;
        right: 10px;
        top: 70px;
    }

You can see my problem on the test page at http://www.freecrm.x10hosting.com/css2/csstest.php

The problem area is the "you are logged is as" section top right

Any ideas?
 

garrensilverwing

New Member
Messages
148
Reaction score
0
Points
0
instead of putting the image in there as an object why not put it as the background to the header div. That way you can put the status bar div's position to relative and float it to the right inside the header div. that way instead of it hugging the side of the body (from the absolute positioning) and hug the right side of the header div.
 

freecrm

New Member
Messages
629
Reaction score
0
Points
0
instead of putting the image in there as an object why not put it as the background to the header div. That way you can put the status bar div's position to relative and float it to the right inside the header div. that way instead of it hugging the side of the body (from the absolute positioning) and hug the right side of the header div.

Now why didn't I think of that...

Thanks for this - I'm sure it will work fine.

Rich


EDIT
__________

Worked a treat! - had some minor issues with positioning and <p> tags but got it sorted and looks great - thanks.
 
Last edited:
Top