what code do I use to create "left and right hand margins" for my entire page, which already contains a small table? In other words, I wish for the whole page to be indented about 3/4 inch. I appreciate any help you can provide.


3 answers


Wrap all your content in a div and give it a class of "container" or whatever makes sense for you. Like this:

<div class="container">
... all your content ...

Then, you have two choices. (A) Make the content have a given width and stay centered, or (B) decide what you would like the margins to be and let the content grow and shrink for different widths of the viewport. Apply one of the following to your CSS.

For method A:

div.container {
    margin: 0 auto; 
    width: 960px; /* where 960px is your desired width */

for method B:

div.container {
    margin: 0 100px; /*where 100px is your desired left and right margins */
Answered almost 10 years ago by Dwayne Anderson
  • Both of those will work, but he didn't really ask about centering. Try this: body {margin:0 100px;} This adds a space around all content in the page. Thus, if the viewport (browser) is smaller than the content, there will still be margins on either side (which you will have to scroll left and right to see). Doug almost 10 years ago
  • This was very helpful for me, but also completely irrelevant to the question. Jason almost 10 years ago
  • I respectfully beg to differ. Option B in my answer achieves what he was asking for, but I wanted to give another option he might not have thought about. I feel that sometimes given a fluid layout in a particularly wide viewport, readability suffers as lines of text become longer and longer. This is why I proposed he might consider a fixed width. Dwayne Anderson almost 10 years ago
  • Dwayne: You're right. I must have misread your original answer or stopped reading after Method A. Your Method B and my comment will give similar results. Doug almost 10 years ago
Guffa 316

You can set the padding of the page. Add this to the head tag:

<style type="text/css">
body { margin: 0; padding: 0 50px; }

This specifies a zero margin around the page, a zero padding for top and bottom, and a 75px padding for left and right. You can try different values to get the result that you want, I used 75px to get something that is close to 3/4" as most screens have a resolution around 100 pixels per inch.

The style sets the top and bottom padding to zero, but perhaps you want to keep some padding resembling the default margin that you currently have:

<style type="text/css">
body { margin: 0; padding: 10px 50px; }

Note that you should set both the margin and padding for body, not just one of them. Most browsers uses a defalt margin, but Opera uses padding instead (which actually makes more sense).

Answered almost 10 years ago by Guffa

Thanks guys. I tried them all, but must have not followed the example given by 148. Then I used the style procedure by 81 and it worked perfectly. I really appreciated your responses. Thanks for your sharing the information.

Answered almost 10 years ago by joe templer
  • Translation (as the rep changes): 148 = Dwane Anderson, 81 = Guffa Guffa almost 10 years ago