CODEWITHSUNDEEP
csslayoutwidth
user1506962
user1506962

Reputation: 207

layout problems with site

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/

Upvotes: 1

Views: 66

Answers (3)

Tom
Tom

Reputation: 3520

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; }

Upvotes: 2

manojadams
manojadams

Reputation: 2430

Check out the width you have assigned to your outermost layout (probably a div). It seems like you have assigned a fixed width to your page which is about the same size or greater than your screen resolution size. Try using a lesser size with the properties margin:0 auto;

Upvotes: 1

M&#225;th&#233; Endre-Botond
M&#225;th&#233; Endre-Botond

Reputation: 4916

You probably have a big container with an 1000px width and used that to center your layout probably with margins and paddings.

Instead drop the big container and use just a single container with margin: auto to center it. Like this:

HTML:

<body>
    <div id="main-container">
    </div>
</body>

CSS:

#main-container {
    width: 800px;
    margin: auto;
}

Note that you can not use float:left on the main container. If you need that (e.g. for background) include another container width width: 100% without padding or margin and float that one.

Upvotes: 1

Related Questions