I have played with the CSS but I can not accomplish what I need to do. Right now, there is a pixel grid on my homepage in the main content area. This is 1000px wide, but it is cut off because the container is too small. How can I make this fit without shrinking the pixel grid, and keeping everything else the exact same, except the width of the content area? Thanks.
I can’t really tell what you want to see in the end. You could, of course, change the #page width to something like 1200px.
Yeah. Your intent is kinda confusing there… BUT there several basic point you need to keep in mind:
-
if you have set a width to your container, and the calculated width ( padding+ width+margin) of your content is wider than the container width… the content will either overflow ( or be cropped if you have the ‘overflow’ property set to anything other than visible)
-
if you HAVENT set a width for the CONTAINER then the container will be the width of it PARENT element
-
In other words, the width of a container is NOT determined by it’s children’s width.
-
that being said, remember that the calculated width is : padding+ width+margin. so if you set the width to both the container and the grid to be 1000px BUT then you added padding or margin to your grid… then it follows that it would be cropped or overflow the container.
hope that helps