How to place content to the right of the fixed img with css 100% height (no width giv

How to place content to the right of the fixed img with css 100% height (no width given)

Image is fixed positioned to the left. And I want the content to go to the right. I don’t know the width of the image as it depends on the 100% height.

Here is the code:


Perhaps it would be better if you explain the dynamics of what you are trying to do as it seems very strange.

Surely a 100% high image would be very wide also and take up nearly all the viewport. Where would the content go?

Assuming you want to scroll forever sideways you would probably need something like this:

body {
    background-color: #000;
#leftheader,img#bg {
#container {
#con0, #con1, #con2, #con3, #con4, #con5 {
    width: 250px;
    margin: 20px;
    padding: 10px;

That assumes that you would want to scroll forever sideways which seems to be what you want with the massive 3000px width.

However Firefox 3 has a bug and won’t move the content away from the image as it takes the image’s original width as the calculation for the content box and will not change it even when the viewport is resized. Other browsers are ok so it’s clearly a Firefox 3+ bug (ff2 is ok).

The layout of course makes no real sense because the 100% high image does not grow in height if the content is taller.

What you seem to be asking for doesn’t seem possible, feasible or usable unless I misunderstand the requirements :slight_smile:

Why can’t you just used a fixed width fixed positioned background image repeated down the side of the body for a similar effect.

Picture is worth thousand of words :wink:

Hi, you could create a wrapper and give that left padding (equal to the (band?) images width). Place the backgrounbd on that element as well.

Then the content will start on the right :slight_smile:


I think you’ll have to settle for a fixed width side image that sits in the background of the body and then use the method that Ryan mentions above.

The scaling 100% high image effect wont work very well and is buggy in Firefox (as it won’t recognise the width of the scaled image).

You could probably do it with JS but I’m not sure it’s an effect I would find pleasing.