I am trying to get the menu and logo areas in my header to be contained within the same width of my center column.

I tried moving this stuff around with margins and made it LOOK right, the problem is it moves around when the browser window is resized. How do I stop that?

The attached image is what I want it to look like, and stay fixed this way no matter the window size.

Also, how the heck do I make a matching background bar between the footer and white center column, like there is between the header and center column?

I am trying to get the menu and logo areas in my header to be contained within the same width of my center column.

They don't look like they are outside the area of the center column

Also, how the heck do I make a matching background bar between the footer and white center column, like there is between the header and center column?

add some padding??

Sorry, I think you're misunderstanding me.

That is what I want it to look like at all times. If you change the window size of the browser the menu and title float dependent on where the edge of the browser window is, rather than the center column. When the window size is made smaller everything shifts to the right, basically.


Add padding where? The places I have tried it do not give the affect I am looking for.

How would I know what is would look like when you provides image and not a link to the site?

It is not currently on a publicly available server.

Ignore the picture.

I set my site width in ATO Layout to 960px.

If I set my Header to be full width:yes and my footer to be full width:yes, how do I keep content within the header and footer statically placed within the 960px side to side area of the center column?

Basically what I am trying to accomplish is like this site: http://havendesignstudio.co

I can make this look the same with margins but when the window is resized the margin is based off the edge of the window, and it causes the menu and the logo to move around and become uncentered from the center column.

the full width header option is just that: The entire header becomes full width. That means the header image, logo, menus are all full width.

It looks like you don't want a full width header, you want a background image that is full width.

One of the sample styles shows and example of this approach. You can find the sample styles in the atahualpa/styles folder.