Text and image not getting synchronized

[shek]

hello,I've problem in synchronizing the text and back ground image..Please visit my blog, http://everything-underthe-sun.blogspot.com/There you can see the text is towards left :)I want the post to be on first white strip and followers,blog archive,etc.. on the second white strip This is the template code..

//some intialization code..body {  background:$bgcolor;  margin:0;  color:$textcolor;  font:x-small Georgia Serif;  font-size:small;  font-size: small;  text-align: left;  }a:link {  color:$linkcolor;  text-decoration:none;  }a:visited {  color:$visitedlinkcolor;  text-decoration:none;  }a:hover {  color:$titlecolor;  text-decoration:underline;}a img {  border-width:0;  }//header code/* Outer-Wrapper*/#body-wrapper {  background-image:url('image url'); background-repeat: no-repeat;  background-attachment:fixed; background-position:center;}#outer-wrapper {  width: 695px;  margin:0 40px;  padding:10px;  text-align:$startSide;  font: $bodyfont;  }#main-wrapper {  width: 460px;  float: $startSide;  word-wrap: break-word;   overflow: hidden;	   }#sidebar-wrapper {  width: 210px;  float: $endSide;  word-wrap: break-word;   overflow: hidden;	  }#footer-wrapper {  margin: .75em 0;  color:$sidebarcolor;  text-transform:uppercase;  letter-spacing:.1em;  font: $postfooterfont;  line-height: 1.4em;}/* Headings */h2 {  margin:1.5em 0 .75em;  font:$headerfont;  line-height: 1.4em;  text-transform:uppercase;  letter-spacing:.2em;  color:$sidebarcolor;}/* Posts */h2.date-header {  margin:1.5em 0 .5em;  }.post {  margin:.5em 0 1.5em;  border-bottom:1px dotted $bordercolor;  padding-bottom:1.5em;  }.post h3 {  margin:.25em 0 0;  padding:0 0 4px;  font-size:140%;  font-weight:normal;  line-height:1.4em;  color:$titlecolor;}.post h3 a, .post h3 a:visited, .post h3 strong {  display:block;  text-decoration:none;  color:$titlecolor;  font-weight:normal;}.post h3 strong, .post h3 a:hover {  color:$textcolor;}.post-body {  margin:0 0 .75em;  line-height:1.6em;}.post-body blockquote {  line-height:1.3em;  }.post-footer {  margin: .75em 0;  color:$sidebarcolor;  text-transform:uppercase;  letter-spacing:.1em;  font: $postfooterfont;  line-height: 1.4em;}.comment-link {  margin-$startSide:.6em;  }.post img {  padding:4px;  border:1px solid $bordercolor;  }.post blockquote {  margin:1em 20px;  }.post blockquote p {  margin:.75em 0;  }/* Comments */#comments h4 {  margin:1em 0;  font-weight: bold;  line-height: 1.4em;  text-transform:uppercase;  letter-spacing:.2em;  color: $sidebarcolor;  }#comments-block {  margin:1em 0 1.5em;  line-height:1.6em;  }#comments-block .comment-author {  margin:.5em 0;  }#comments-block .comment-body {  margin:.25em 0 0;  }#comments-block .comment-footer {  margin:-.25em 0 2em;  line-height: 1.4em;  text-transform:uppercase;  letter-spacing:.1em;  }#comments-block .comment-body p {  margin:0 0 .75em;  }.deleted-comment {  font-style:italic;  color:gray;  }#blog-pager-newer-link {  float: $startSide; } #blog-pager-older-link {  float: $endSide; }#blog-pager {   text-align: center; }.feed-links {  clear: both;  line-height: 2.5em;}/* Sidebar Content*/.sidebar {   color: $sidebartextcolor;  line-height: 1.5em; }.sidebar ul {  list-style:none;  margin:0 0 0;  padding:0 0 0;}.sidebar li {  margin:0;  padding-top:0;  padding-$endSide:0;  padding-bottom:.25em;  padding-$startSide:15px;  text-indent:-15px;  line-height:1.5em;  }.sidebar .widget, .main .widget {   border-bottom:1px dotted $bordercolor;  margin:0 0 1.5em;  padding:0 0 1.5em; }.main .Blog {   border-bottom-width: 0;}/* Profile */.profile-img {   float: $startSide;  margin-top: 0;  margin-$endSide: 5px;  margin-bottom: 5px;  margin-$startSide: 0;  padding: 4px;  border: 1px solid $bordercolor;}.profile-data {  margin:0;  text-transform:uppercase;  letter-spacing:.1em;  font: $postfooterfont;  color: $sidebarcolor;  font-weight: bold;  line-height: 1.6em;}.profile-datablock {   margin:.5em 0 .5em;}.profile-textblock {   margin: 0.5em 0;  line-height: 1.6em;}.profile-link {   font: $postfooterfont;  text-transform: uppercase;  letter-spacing: .1em;}// Footer code  </head>  <body id='body-wrapper'>  <div id='outer-wrapper'><div id='wrap2'>	<!-- skip links for text browsers -->	<span id='skiplinks' style='display:none;'>	  <a href='#main'>skip to main </a> |	  <a href='#sidebar'>skip to sidebar</a>	</span>	<div id='header-wrapper'>	  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Everything Under the Sun (Header)' type='Header'/></b:section>	</div> 	<div id='content-wrapper'>	  <div id='crosscol-wrapper' style='text-align:center'>		<b:section class='crosscol' id='crosscol' showaddelement='no'/>	  </div>	  <div id='main-wrapper'>		<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>	  </div>	  <div id='sidebar-wrapper'>		<b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='About Me' type='Profile'/><b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/><b:widget id='Followers1' locked='false' title='Followers' type='Followers'/><b:widget id='Gadget1' locked='false' title='Social Networking' type='Gadget'/></b:section>	  </div>	  <!-- spacer for skins that want sidebar and main to be the same height-->	  <div class='clear'> </div>	</div>      </div></div></body></html>

Please tell me what are the changes I've to make and where in the template code ?Waiting for a reply..

[shek]

I've edited some part in code, but I'm not able to succeed :)please, anyone can help me out ?

[shek]

I've edited again some part of the code and was able to make the required changes :)But the problem is that, when I see the blog in different resolution I'm able to see the same problem , that is, the text is not on the 1st white strip and followers, tools, etc. are not on 2nd white strip :)Can anyone help me out.. please...

[jeffman]

#body-wrapper contains your background image, which I guess is the thing you're trying to line things up on. This image is positioned by the background-position:center directive. It is also the entire width of the window, so it will shrink/grow on demand. (Ah. I see it is actually your body element, so of course it behaves that way.)#outer-wrapper holds most of your content. Other elements inside this wrapper have margins and padding, but this is the main one. It is positioned on the left of #body-wrapper. It has margin and padding that push the content toward the right. But since #body-wrapper is the full width, this div appears to be attached to the left of the screen.These positioning techniques don't work together in a way that will line things up. One uses centering, the other uses margins. Not a good match. The #body-wrapper background shifts position as the screen resolution/width changes. But #outer-wrapper is always the same distance from the left. That's never, ever going to work.Try centering #outer-wrapper. You may then have to adjust the margin and padding, possibly down to 0. The point is to use the same positioning technique.It might also make more sense for your background image to be the background of #outer-wrapper instead of the body. The same attachment and positioning rules should work.

[shek]

I've tried what you said me(upto the extent I understood), but it wasn't working :)I think, I'm not able to do it correctly..Can you please, make the necessary changes in the code ?

[ShadowMage]

I really doubt that anyone is going to do it for you.Try giving your #outer-wrapper a margin: 0px auto; declaration in your CSS to center. Like DD said, you might also have to play with the margins and padding to get it right. Start there and see how that works.