Krsten,
your body doesn’t have a width assigned in your .css, and your #page only has a max width. If you didn’t make this theme, I’d guess the person wanted it to be a fluid layout rather than a fixed one. You can see which divs are shrinking when you re-siz the page using firebug, which will help. But if you simply downloaded this theme, you might be better served finding one that does what you want it to, rather than trying to “fix” this one into something I suspect it’s not.
Chris
Thanks for your advise. I am building a child theme off of Twenty Eleven. If I were to fix it, would I just assign a width to #body and #page? Or, instead of fixing it, do you have another free wordpress theme you would suggest for this?
Looks like this did the trick:
body {
padding: 0 2em;
width: 1000px;
}
#page {
margin: 2em auto;
max-width: 1000px;
width: 1000px;
}
Any forseable problems with this?
… Oh, except now everything is to the Left instead of the center… How do I fix that?
Kristen,
Yeah, I would actually make the body 960px (which is roughly the size of the majority of displays), which means it will show without horizontal scroll bars for a lot of your users. Then for your #page div “#page {margin:0 auto;}” which will centre that div on the screen.
C
So this is what I have now, but the page still isn’t centered.
body { padding: 0 2em;
width: 960px;}
#page { margin: 0 auto; }
Looks centred to on my end. There are still scroll bars, but that is because you’ve padded the body horizontally 2 ems, and that pushes it’s total width over 960px (and I’m looking on my little macbook, not my wide desktop). You shouldn’t need to pad the body, rather use margins or padding for child divs (#page in this case, so padding). When you do this, you will need to subtract the padding you add from the total width of the div you want, so it will probably be easier to pad in pixels rather than ems.
Does this make sense? It’s late here and I just finished watching a film, I’m a bit bleary-eyed.
C
#page {
margin-left:auto;
margin-right:auto;
}
or add to body, depends on how your theme works. don’t use em for horiz margin…remove extra spaces.
Hey, so I hear what you’re saying. The padding needs to go. I just can’t seem to get rid of it. I wound up getting everything centered by editing this:
/* One column */
.one-column #page { auto-width: 960px;}
to this:
/* One column */
.one-column #page { width: 960px;}
Could the padding be controlled by .one-column as well?
I’ve tried getting rid of the 2em, changing it to 0em, changing it to auto, nothing has worked so far.
Kristen,
Are you using Firebug? It will tell you every .css rule that applies to a given element. Including ones that are cancelled out by other ones.
C
C,
I finally figured out how to use Firebug, and I got this resolved. Thanks so much for your help!
