CODEWITHSUNDEEP
htmlcssbackgroundspace
user2849211
user2849211

Reputation:

How to leave white space on both sides of page?

My client wants the background to have white spaces on sides(weird?), but I couldn't find the solution.

Basically I want to have a background and white on sides for wide screens.

NOTE AND IMPORTANT: I need this on body.

How can I do this?

Upvotes: 2

Views: 11443

Answers (3)

Ravindran
Ravindran

Reputation: 1

HTML 

<body class="outerwrapper">
  <div id="innerwrapeer" class="innerwrapeer">
  </div>
</body>

CSS 

body {
  width:1024px;
  height:auto;
  background-color:white;
}

.innerwrapeer {
  width:800px;
  height:auto;
  background-color:red;
}

Upvotes: -1

erlingormar
erlingormar

Reputation: 461

Try something like this CSS on your body

body { width: 974px; margin: 0 auto; }

The margin statement means that you give your body a top- and bottom-margin of 0. The auto-value means that however much horizontal space remains after you've used up 974px, will be evenly split to add the whitespace on each side of the body.

If you don't have a wrapping container like <header>, <section> that you can apply this width to, you might find yourself a little restricted when it comes to placing content like background-images and such that should display on the sides of the body. You will be left with only the html-element as a parent to the body so that doesn't offer a lot of layers or hooks where you can add advanced styling for decoration and such... just a word of caution :)

Upvotes: 5

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175088

You give your container a width (say, 1000px), and then use margin: auto on it.

Demo

Upvotes: 4

Related Questions