CODEWITHSUNDEEP
cssdocument-body
user6908406
user6908406

Reputation: 3

Unable to adjust the BODY width with CSS

I need body to have a silver background and fill only 75% of the page. That is, only 75% of the page is painted silver, while the remaining part is unused and painted according to broswer's defaults. The left part of the page is my BODY, the right part is unused. I tried

body {
    background-color: silver;
    width: 75%;
}

But still the whole page is painted silver. How can I accomplish my task?

Upvotes: 0

Views: 1206

Answers (3)

andreas
andreas

Reputation: 16936

You have to use a container div for this purpose:

body {
  padding: 0;
  margin: 0;
}
div {
  min-height: 100vh;
  background-color: silver;
  width: 75%;
}
<div></div>

Another approach (if you don't need the right border for the content) would be to use background gradients:

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  background: -webkit-linear-gradient(left, silver 0%, silver 75%, white 75%);
  background: linear-gradient(to right, silver 0%, silver 75%, white 75%);
}

Upvotes: 0

t.niese
t.niese

Reputation: 40882

You would need to set the background color for both html and body.

In addition you have set a height of 100% to the html element and a min-height of 100% or 100vh to the body so that it will alway fill the whole height of the screen.

The padding: 0 and margin: 0 are important so that you won't have a border between your body and the window.

But be award that this will work only for modern browsers. I can't test older browsers right now, but it would assume that this will have problems with in IE below the version 9 or 10.

So if you want to support older browsers too, then you would need to use the solutions provided by the other answer and use a div as container for your content.

html {
  background-color: white;
  height: 100%;
  padding: 0;
}

body {
  background-color: silver;
  width: 75%;
  min-height: 100%;
  margin: 0;
}

div {
  height: 500px;
  width: 50px;
  background-color: red;
}
<div>
  test
</div>

Upvotes: 1

Faizal Shap
Faizal Shap

Reputation: 1820

Thats not how it Works. U might use a container as

<div id="container"></div>
#container{
    background-color: silver;
    width: 75%;
}

Upvotes: 0

Related Questions