I feel I have a good grasp on things, but for this I have no idea how to fix.

http://74.54.18.217/~modernsu/

Basically you will see this large background image. I want that to be centered with the boxes on top.

The problem is, look what happens to the boxes when your browser window dips below 1000px wide, the boxes move off of the background image.

The easy solution would be to make the backgrounds of the boxes PNG's, however they use photoshop blending methods, and that effect can't be reproduced with opacity alone, thus I need them to be part of the background.

I also notice that if you make the browser window REALLY small width-wise, you will see the background DOES in fact stop at some point... so I'm hoping this can be fixed

The other thing I tried was to add #wrapper_outer to the outside of the wrapper, set the background of that to the image, center that div with margin:0 auto. But the problem then is when someone with an average browser size looks at the page, there is an enormous left margin.

If I add position:relative, and add left:-400px to make it flush with the left border of the browser, than that means anyone with a large monitor sees a left-centered page with tons of ugly color to the right (the fill color on the body)

Does anyone have any other tips how I can accomplish this so it remains centered, and also the background+floated div's remain constant to eachother

Thanks!

2 answers

Ktash 1851
1
point
This was chosen as the best answer

The issue is that your body is the one that contains the background, but your wrapper is what contains the width. The easiest fix is to set a min-width on your body element that is the width of the content. Min-width's don't work in IE-6, so if you want to support that, the easiest way is to do a conditional comment with the width set, since it treats width as min-width. It would look like:

<style type="text/css">
    body {
        min-width: 993px;
    }
</style>
<!--[IF lt IE7]>
<style type="text/css">
    body {
        width: 993px;
    }
</style>
<![ENDIF]-->
Answered about 6 years ago by Ktash
Zesty 0
0
points

hey, I tried that but it doesnt seem to work :/

the elements (the player, and the blog text.. basically any element on the left) still "hangs" and hooks on the left side of the browser window

Answered about 6 years ago by Zesty
  • Well, that would probably be due to the fact that on your wrapper you are using position: absolute; with a negative margin, which will do that. Unless you have a reason not to, I would recommend using no position, and instead just doing margin: 0px auto; which will center it. Also, in the future you can just comment on my answer, and I will update the code there. Ktash about 6 years ago