Need Help…Window Sizing Content Issue

[soupking]

Hi Everybody,

I have a situation where my background and foreground elements need to be in the exact same place. So that implies that no matter what size or scale the user’s window is at that my content doesn’t alter it’s position.

In this site if the window shrinks of the x-axis too much the DIV content catches/stops and the background keep scrolling relatively in center. I want the content on top to do the same thing but somewhere I’m either telling (or not) to stop at a certain place.

However, I don’t see anything around 800px where this thing is stopping. Here’s the site for reference:

http://axiom-media.com/__staging/

If you scale the window to be really narrow you’ll see what I mean. Is there a simple fix for this at all?

Thanks for reading.

[Paulie_D]

I suspect it’s this

body {
height: 100%;
width: 520px;
height: 340px;
margin: 0 auto;
padding: 160px;  /* Here, I suggest padding:160px 0; instead */ 
overflow: hidden;
font-family: "AmericanTypewriter", times, serif;
font-size: 10px;
font-stretch: normal;
line-height: 15px;
}

[Senff]

Yea I would have taken a different approach than putting a width/height on the body. Anyways, you could try this CSS for the outer element:

div.outer {
    width: 520px;
    height: 340px; 
    margin: 0 0 0 -260px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 160px;
}

[soupking]

Ah! Brilliant! You guys rock! Totally nailed it!

I don’t normally do CSS and would’ve spent hours flipping switches to get something that works.

Thank you!! :D

[Author]

Posts