Width Of page Changing When Height Exceeds Viewable Area

Question

I made a website. When the body get longer than the page so that a scroll bar will show up, the body is moved a few pixels to the left. This confuses me. Is there some automated setting that is doing this?

This is my css if u want to see it.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: center;
}

#cohenImage{
    float:right;
    margin-left:1em;
    border: .2em solid #D3D3D3
}

.block {
    display:block;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}


/*******************************************************************************
Theme Styles
*******************************************************************************/


body {
    box-sizing: border-box;
    color:#373737;
    background: transparent;
    font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    width: 70%;
    margin-right:auto;
    margin-left:auto;
    padding: 3em;
    background-image:url('../Cohen-Background.jpg');
    background-color:#000000;
}

.inline{
    display:inline;
}

.title {
  margin: 0;
  color: #fff;
  font-size: 300%;
  font-weight: 700;
  text-shadow: #111 0px 0px 10px;
  padding-top:.8em;
  padding-bottom:.7em;
}



h1, h2, h3, h4, h5, h6 {
  margin: 10px 0;
  font-weight: 700;
  color:#222222;
  font-family:'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
  letter-spacing: -1px;
}

h1 {
  font-size: 250%;
  font-weight: 700;
}

h2 {
  padding-bottom: 10px;
  font-size: 250%;
}

h3 {
  font-size: 200%;
}

h4 {
  font-size: 170%;
}

h5 {
  font-size: 120%;
}

h6 {
  font-size: 110%;
}

p {
  font-size:105%;
}

b {
    font-weight:bold;
}

footer p {
  color: #f2f2f2;
}


ul.menu {
    margin: 0;
    padding: 0;
}

ul.menu {
    height: 80px;
    float:left;
}

ul.menu li {
    list-style: none;
    float:left;
    height: 2em;
    text-align: center;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    background: -o-linear-gradient(top, rgb(100,170,255) 0%,rgb(69,69,69) 100%);
    background: -ms-linear-gradient(top, rgb(100,170,255) 0%,rgb(69,69,69) 100%)
}

ul.menu li a {
    display: block;
    padding: 0 20px;
    text-align: center;
    line-height: 2em;
    text-decoration:none;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    background: -o-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69) 100%);
    background: -ms-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69) 100%);
    color:white;
    font-weight:bold;
}

ul.menu li a:hover {
    background: #919191;
}

ul li.active a{
    background : #9E9E9E;
}

.wrapper {
    width: 100%;
    height: 2.1em;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    background: -o-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69) 100%);
    background: -ms-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69) 100%)
    position: relative;
}



.inner {
  position: relative;
  padding: 2em;
  margin: 0 auto;
  font-size:105%
}

.header{
  background:rgba(0, 0, 0, 0.9);
  border-top: .3em solid #2E2E2E;
  border-left: .3em solid #2E2E2E;
  border-right: .3em solid #2E2E2E;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  color:white;
}



#main_content_wrap {
  background: #FCFCFC;
  text-align:left;
  padding:0;
  margin:0;
}

#main_content {
  padding-top: 3em;
}

#footer_wrap {
  background:rgba(0, 0, 0, 0.9);
  border-top: .3em solid #2E2E2E;
  border-left: .3em solid #2E2E2E;
  border-right: .3em solid #2E2E2E;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  color:white;
}

table {
    background-color: #EEEEEE;
    border: 2px solid #D4D4D4;
    border-collapse: collapse;
    padding-left: 2px;
}
thead {
    color:black
}
th {
    background-color: #D4D4D4;
    padding-right: 4px;
}
tr, td, th {
    border: 2px solid #D4D4D4;
    padding-left: 4px;
}
dt {
    font-weight: bold;
}

/*******************************************************************************
Small Device Styles
*******************************************************************************/

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
        body{
        width: 100%;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
        body{
        width: 100%;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    body{
        width: 100%;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    body{
        width: 100%;
    }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    body{
        width: 100%;
    }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    body{
        width: 100%;
    }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    body{
        width: 70%;
    }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    body{
        width: 70%;
    }
}

/* iPhone 4 ----------- */
@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body{
        width: 100%;
    }
}

One moment, I'm pushing it to the server. :) – Zachooz Sep 07 '13 at 22:30 — Zachooz, Sep 07 '13 at 22:30

score 0 · Accepted Answer · answered Sep 07 '13 at 22:30

0

This is a feature of almost all browsers. If an element is too tall for the window, the vertical scroll bar appears. This scroll bar does occupy some of the width that was previously available to the window. So if you have css that depends on the width of the window, like width: 100%, then those items will change size. If you want the vertical scroll bar to not appear and not take up any of your screen width use something like: overflow: hidden or overflow-y: hidden

answered Sep 07 '13 at 22:30

Kyle Weller

2,533
9
35
45

Is there a way to do this without making the scroll bar dissappear? – Zachooz Sep 07 '13 at 22:34
You can make the width of the item in question fixed. `width: (some)px` – Kyle Weller Sep 07 '13 at 22:37
[width: auto](http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/) will often cause less problems than `width: 100%` – FelipeAls Sep 07 '13 at 22:38

score 0 · Answer 2 · edited May 23 '17 at 10:31

The browser has to make room for the vertical scrollbar (not all browsers, Safari and maybe Chrome on OS X may render the scrollbar on top of content, I didn't test for a long time so I'm not sure).
This is the expected behavior of an element part of the UI of the software that a browser is: please see a previous answer on the reasons this is expected from the user and not a problem to be solved by us webdesigners and webdevelopers.

Width Of page Changing When Height Exceeds Viewable Area

2 Answers2