Jump to content

Content shifts when window is resized

Surefire Mechanical

Recommended Posts



I thought I was doing a simple thing, reformatting my website slightly and cleaning it up a bit but I'm running into problems. When I resize the browser window, some of the content shifts its position on me. I have tried various different methods of postioining- relative, absolute etc., and have tried asigning widths and even min-widths to elements to no avail. Unfortunately, a thorough search on the web leads me to a lot of other people having this problem and answers that aren't solving it.


I am beginning to think it relates to the fact that my particular page uses a non-repeating, centered background image (especially as this is one of the changes I made to the layout)


you can see an example of what's happening at


Even worse, when I try to view the above page in firefox, the positioning is out of whack even when the browser is maximized....is this due to differences in the way the browsers handle tables?

Of course, I need this website to display properly in all major browsers and not act up if the window is resized.

Link to comment
Share on other sites

Click the little icon that looks like a chain link with a drip of green blood.


You seem to have an interesting comedy situation that looks like a bad mix of various types of positioning.

Link to comment
Share on other sites

lol, yea probably not the best way for me to illustrate the problem. I can't say anything for the state of that style sheet currently....I had been trying so many different things...that's an abandoned page, included just to illustrate as the actual page isn't uploaded-the new page in its current state is without any kind of positioning at all, and an <h1> tage is the only element. The stylesheet in it's entirety is:


* { margin: 0; padding: 0; }body { font-family: tahoma; color: #FFFFFF; background-color: #4B4B4B; background-repeat: no-repeat; background-position: center 0; }


the html then calls up the relevant background image and I've also tried making it the background of a <div> and including the content (in this case just an h1 heading) inside the div

And I'm still experiencing the same issue: the <h1> is not staying snapped to the background image when the window is resized. Again, it is the background image that is moving to keep a common distance from the left and right of the windows, and this is making the content appear to shift.


So, however battered that stylesheet may be, it's not the issue.

Edited by Surefire Mechanical
Link to comment
Share on other sites

Remove the background image from body this will always cause the image to move depending on screen width, place a div around table of same width, place the background image to this, and center this div with margin: 0 auto; this width will be constant so bg image wo't reposition itself anymore.

Link to comment
Share on other sites

The body is always the total width of browser screen available to it, so the image adjusts and centres itself as the body becomes smaller or larger, by placing it in a fixed width container the resizing of body/browser window will no longer affect the position of background image in its fixed width container.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...