CODEWITHSUNDEEP
htmlcss
bɪˈɡɪnə
bɪˈɡɪnə

Reputation: 1085

Whitespace on side of web page

In code below I have set the width of page to 980px and there appears some whitespace at right side, which disappears on setting body width to 1050px. My screen resolution is 1366x768, I have read that most websites have 950px to 980px width and most websites like facebook entirely fit into my screen then why my 980px is having whitspace at right side.

body {
  width: 980px;
  overflow: scroll;
}
#container {
  width: 100%;
}
.one {
  height: 200px;
  float: left;
  border: 1px solid red;
  width: 25%;
  box-sizing: border-box;
}
.two {
  height: 200px;
  display: inline-block;
  border: 1px solid blue;
  box-sizing: border-box;
  width: 50%;
}
.three {
  height: 200px;
  float: right;
  border: 1px solid green;
  box-sizing: border-box;
  width: 25%;
}
<div id="container">
  <div class="one">this is first block
  </div>
  <div class="two">the content changes it's position on zooming in
  </div>
  <div class="three">Is there any way to keep it as it is with a scroll bar
  </div>
</div>

Upvotes: 1

Views: 49

Answers (2)

user5325844
user5325844

Reputation:

Have you tried setting the margin of html or body to 0?

Like:

html, body {
  margin: 0;
}

JSFiddle

EDIT: The white space is a margin that is set as default for html, so if you want your page to be "borderless", you simply need to set the margin of html (and to be safe that of body, you never now what different browsers will do) to 0.

Upvotes: 2

nocturnic
nocturnic

Reputation: 11

try unsetting width see what happens. I don't set page width on anypage I make and It works fine. now If I have a box a table a shadowbox ect ill set dimensions for that but I dont ever designate a page width. Maybe just comment it out refresh see what happen.

Upvotes: 1

Related Questions