Layout Width

[thinkmedia]

Hey Jason,

I added this code to http://www.bakersbeans.ca to add some width to the site (mostly the sidebar) to accommodate ads that all seem to be 300 px wide these days instead of the old 250 px wide.

#top, #featured, #main, #featured_below, #bottom, #after-footer {
margin: 0 auto;
width: 1100px;
}

It seems to work on everything except IE.
In IE (PC) it drops the sidebar down below the content.

Any thoughts?
I have looked everywhere but can’t figure it out.

Thanks

Mitch

Topic

[Jason Bobich]

Hey Mitch,

I’m not quite sure on that one. Unfortunately I just don’t have any way to get on a PC where I’m at. If I were editing your site and had access to IE, here are some things I’d do to troubleshoot.

1) Are you sure that this happens as a direct cause of adding the CSS you’re referencing here? If you comment out this change of width, does the sidebar issue go away?

1b) And so if you’ve discovered it wasn’t actually this CSS snippet you thought it was, it must be something else doing it. So just go through commenting out chunks of CSS until the issue goes away.

2) Ok, moving past #1, if it is indeed the width change that’s doing it, is it possible there’s something odd about how the exact width 1100px works out with the Bootstrap grid system. Try adjusting the number by 1px repeatedly a few times to see if you can hit a width where this issue doesn’t happen.

[thinkmedia]

Hey Jason,

1. yup, removed the width adjusting css AND all other custom css in the file. No change.
2. removed the “javascript added” plugin/widget that is used to put the Ad code in the widget
3. turned off caching plugin and cleared the cache
4. cleared the browser cache

After doing all of that, individually and as a full group, nothing changed in IE 11 – Win8

[Jason Bobich]

So then your issue isn’t related in any way to the CSS snippet you thought at the start? Do you see the same behavior on our demo?

http://demoblvd.com/themes/alyeska/sidebar-layouts/sidebar-right/

And a couple of other things — Is it possible you’ve zoomed in or out in your IE web browser? Is it possible you’ve turned on compatibility mode in your IE browser?

[thinkmedia]

Hey Jason,

Nope, it doesn’t appear to be related.

Demo Screengrab – same issue
http://s13.postimg.org/8nmgh7rs7/Jason.jpg

No zoom and not in compatibility mode.

[Jason Bobich]

Are you sure you haven’t messed with your IE browser’s settings? It looks like it’s in compatibility mode. I can tell because the shadows on the side have no effect, which for Alyeska is usually a giveaway for viewing in IE7.

Here’s what I’m getting —

Alyeska Demo in IE11 on Windows 7:
http://www.uploadblvd.com/uploads/image_530e8f7581fc5.png

Your site in IE11 on Windows 7:
http://www.uploadblvd.com/uploads/image_530e90a8eb8b2.jpg

Your site in IE11 on Windows 8.1:
http://www.uploadblvd.com/uploads/image_530e90d15adbc.jpg

[thinkmedia]

Hey Jason,

I reset everything in IE and it works now.

Sorry to be a pain.
Man I hate IE!

[skubeedoo]

Jason, can you add the above code to make the site wider, if so, is there a limit to the amount of pixels you can widen it to?
Thank you

[Jason Bobich]

@skubeedoo There’s really no limit, no. But if your’e going to go wider, I’d suggest changing the setup so you’re using max-width instead of width like this:

#top, 
#featured, 
#main, 
#featured_below, 
#bottom, 
#after-footer {
	max-width: 1200px;
	width: auto;
}

[skubeedoo]

How do you use max-width?

[Jason Bobich]

Just do what I showed above. That’s all there is to it. Instead of declaring the width using width, you’re using max-width, and that way, if the person viewing your site has their browser less than that, it’ll shrink down.

[skubeedoo]

Thank you, and thanks for the quick response. 🙂

[Author]

Replies