ansaurus

Question

Answer 1

+3 A:

Use margin: 0 auto

Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:

#mainDiv {
  width: 80%;
  margin: 0 auto;
}

Ryan McGeary 2009-11-16 16:13:36

All three of the solutions have the issue, that my mainDiv / content / center_div is not sizing to 100% of the window. Thus I have the gray background along the size and halfway up the page. I've set the min-height to 100% but it doesn't seem to matter. I'm creating a wizard which has different content on different pages.

JD 2009-11-17 09:05:40

Put the background on the `<body>` tag or some other outer div.

Ryan McGeary 2009-11-17 14:48:25

Answer 2

A:

If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.

CSS:

#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}

Html:

...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...

(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)

Martha 2009-11-16 16:15:53

Answer 3

+3 A:

Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:

#center_div {width: /* whatever */;
             margin: 0 auto; /* to center in the viewport */
             overflow: auto; /* or visible */
}

You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.

David Thomas 2009-11-16 16:16:28

I do wish people would stop and explain the down-votes, just occasionally. For kicks. And so that I could learn what was misleading, or wrong, in my answer.

David Thomas 2009-11-19 00:25:46

ansaurus

tags:

views:

answers:

css columns shrinking 100% pixel value

related questions