# CSS positioning help needed

**URL:** https://boards.straightdope.com/t/css-positioning-help-needed/340128
**Category:** Factual Questions
**Created:** [January 15, 2006, 9:37pm UTC](https://boards.straightdope.com/t/css-positioning-help-needed/340128 "2006-01-15T21:37:05Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![The\_Shroud](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@The\_Shroud](https://boards.straightdope.com/u/The_Shroud)
#### Post date: [January 15, 2006, 9:37pm UTC](https://boards.straightdope.com/t/css-positioning-help-needed/340128/1 "2006-01-15T21:37:05Z")

</div>

I’m designing a new web page. I’m trying to get a masthead background image to align perfectly with a body background image. For the most part, it’s working fine, but there are a couple of issues:

1. Resizing Internet Explorer to certain dimensions (I’m guessing odd-numbered) will cause the images to be misaligned by 1 pixel. This is annoying, because both images are the same width, and are both supposed to be centered in the browser. I can understand that the browser has a choice to make when dealing with odd dimensions, but why would IE center 2 elements differently?

2. Resizing Firefox down to less than the width of the masthead (694px) causes complete misalignment. I’m not so worried about this effect, since I don’t really want my web page viewed at anything less than 700px wide.

Here’s my code:

```auto

#masthead {
margin: 0 auto;
border: 0px solid #999;
background-image: url(masthead.png);
background-position: center;
background-repeat: no-repeat;
width: 694px;
height: 60px;
}

body {
  background: #cccccc url(background.jpg) repeat-y center;
  margin: 0 auto;
  font:x-small Verdana,Helvetica,Sans-Serif;
  text-align:center;
  color:#333;
  font-size:11px;
  }

```

---

<div class="post-metadata">

### Author: ![Khadro](https://avatars.discourse-cdn.com/v4/letter/k/f07891/32.png) [@Khadro](https://boards.straightdope.com/u/Khadro)
#### Post date: [January 16, 2006, 1:02am UTC](https://boards.straightdope.com/t/css-positioning-help-needed/340128/2 "2006-01-16T01:02:18Z")

</div>

It might be anathema to you, but have you considered another container, the same width as the masthead, within the body itself?

\<body\>  
\<masthead\>  
content  
\</masthead\>  
\<content\>  
main content

---

<div class="post-metadata">

### Author: ![Khadro](https://avatars.discourse-cdn.com/v4/letter/k/f07891/32.png) [@Khadro](https://boards.straightdope.com/u/Khadro)
#### Post date: [January 16, 2006, 1:04am UTC](https://boards.straightdope.com/t/css-positioning-help-needed/340128/3 "2006-01-16T01:04:11Z")

</div>

d’oh. Stupid tab then space reflex…

anyway, if you complete the above example, and style the content the same width as the masthead, and center the elements rather than the background, it might solve your problem.

Failing that, could we perhaps get a link, so we can see the behaviour first hand, as I don’t really feel like making an interlocking image masthead right at the moment.

---

<div class="post-metadata">

### Author: ![The\_Shroud](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@The\_Shroud](https://boards.straightdope.com/u/The_Shroud)
#### Post date: [January 16, 2006, 5:13am UTC](https://boards.straightdope.com/t/css-positioning-help-needed/340128/4 "2006-01-16T05:13:23Z")

</div>

> [@Khadro](#):
>
> d’oh. Stupid tab then space reflex…
> 
> anyway, if you complete the above example, and style the content the same width as the masthead, and center the elements rather than the background, it might solve your problem.
> 
> Failing that, could we perhaps get a link, so we can see the behaviour first hand, as I don’t really feel like making an interlocking image masthead right at the moment.

Ah, good idea. I’ll give it a shot later tonight. Thanks!
