Question

I am working on a website for client / design studio, there was strange issue where I found that despite having body and html elements set to width 100% and when I resize browser, the scrollbar appears forcing me to scroll the right only to find there is a gap on the right side in about 150pixels. The body element container () sets itself to fixed width of 1240px when the browser is resized but still leave the gap on the right side.

Here is css code for body element.

body {
min-width: 1200px;
max-width: 100%;
left: 0px;
right: 0px;
width: auto !important;
margin: 0 auto;
padding: 0;
background: url('images/bg-repeat2.jpg') repeat;
line-height: 1;
font: 'BitstreamVeraSerifRoman', Arial, sans-serif;
}

here is the css for html element:

html {
margin: 0 auto;
padding: 0;
width: 100%;
min-width: 1200px;
left: 0px;
right: 0px;
}

I am not using “overflow-x: hidden;” property due to concerns in the need for scrolling in smaller screens and mobile devices as well. Please note that this site is desktop version.

I would appreciate if anyone in this community can assist by providing solution or fix.

Thanks.

Answer 1

Youre problem seems to be min-width:1200px; remove that, and it will resolve the mandatory horizontal scroll. If you want 100% width do it like this:

html, body {
width:100%;
}

I dont think you need more then that width wise, for html and body. if you do, explain why or post a pic what you need pls.