[Theme – Twenty Eleven] how to prevent elements moving when broswer window

that behaviour is intended; but obviously, the changes you have made to style.css so far, seem to be in conflict with it.

possibly, you can remove all styles starting from:

/* =Responsive Structure
----------------------------------------------- */

@media (max-width: 800px) {

all the way down to just before:

/* =Print
----------------------------------------------- */

(leave this last bit in place)

ps:
some of the behaviour might also be caused by the validation errors that you have introduced into the theme (example validation report of the page in your link):
http://validator.w3.org/check?uri=http%3A%2F%2Fwhynotburnbooks.com%2Flinks%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

but it seemed to throw everything out of position.

i only checked that in the example linked page;

quite unlikely that the change would have such an effect, as these styles only come into action at narrower browser screen widths.

there seems to be something more severely wrong in your theme.

have you checked what i addad as a post-scriptum to my earlier response?

ps:
some of the behaviour might also be caused by the validation errors that you have introduced into the theme (example validation report of the page in your link):
http://validator.w3.org/check?uri=http%3A%2F%2Fwhynotburnbooks.com%2Flinks%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

The layout / resizing problem occurs across all pages on the site, not just that page, so I expect it’s caused by something (or multiple things) in the stylesheet,

there seem to be three causes:

a:
the use of postion: absolute; in the style of #secondary:

#secondary {
	float: right;
	position: absolute;
	margin-left: 736px;
	margin-top: 50px;
	margin-right: 76px;
	width: 188px;
}

i would suggest to change this to:

#secondary {
	float: right;
	margin-top: 50px;
	margin-right: 76px;
	width: 188px;
}

b:
the ‘Responsive Structure’ styles of the original theme;
my suggestion, as before, remove those.

c:
an unneccassry padding on the header image:

#branding img {
	height: auto;
	margin-top: -20px;
	margin-left: 48px;
	padding-right: 200px;
	margin-bottom: -50px;
	width: 940px;
}

remove padding-right: 200px;

only evaluated in firefox with the web developer add-on; there might be other issues in other browsers.

if you should make the changes, and are not immediately satisfied with the results, but want further suggestions, please leave the changes in your site until someone had the opportunity to cross-check them, and to comment on them.

Hi DW83,

I was wondering if you could tell me how you got the header and menu bar to stay in place,

That’s exactly what I want to do and Just cant work out what I need to do.

Regards

Just wanted to add a word of thanks to kremo5le and alchymyth. By your powers combined I am no longer frustrated!

Thanks folks.

Using kremo5le’s information is good, but if the person resizes the width of the browser, the sidebar (on the right) drops below all the posts (as well as the comment bubbles). I’ve had this problem with the twentyten theme as well and fixed it on both.

In the standard style.css file, all you have to do is:

1. Copy/Paste the original code into a text editor
2. Find/Replace all the “max-width” (without quotes of course) with “width” (again, without quotes).
3. Copy/Paste the corrected code back into your WordPress style.css
4. Click Save.

I’ve tested it on long menus, and the sidebar and it works. I only have an iphone, so I can’t test with the other mobile devices.

To The Top,
Kevin Rape (I have an awesome last name 🙂 )