Question

I have a problem with my site. When I resize the window everything stays still and doesn’t move, the window just crosses over everything.

Here are the images to epxlain it a bit better.. hopefully.

This is the site in normal window – http://imageshack.us/photo/my-images/407/problem2a.jpg/

and when resized – http://imageshack.us/photo/my-images/696/problemim.jpg/

Can anyone tell me what the problem is? I would like my layout to work like this website – http://www.thisoldbear.com/

Answer 1

Next time, please add your HTML and CSS code to your question as it makes everything so much easier and you’ll get more accurate answers.

By looking at your pics I get the feeling that you’ve added left side padding/margin (150px something?) to try and center your content, when you really should have added this to your container DIV(s)

margin: 0 auto;

This will center the content and keep it centered when you resize the window

Update

HTML

<div id="container">
  <header>
    <div id="logo"></div>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
    </nav>
  </header>
</div>
<div class="content">
  ...
</div>

CSS

body {
  background: url(../../core/images/bg.png);
  font-family: 'Pontano Sans', sans-serif;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  height: 80px;
  background: url(../../core/images/header.png);
}

#content, header {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

#logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 124px;
  height: 171px;
  background: url(../../core/images/logo.png);
}

nav {
  padding: 0;
  margin: auto 0px auto 150px;
}

nav a {
  text-decoration: none;
  font-size: 17px;
  color: #f4f4f4;
  outline: none;
  margin: 0px 0px 0px 50px;
}
nav a:hover { text-decoration: underline; }