How can I get rid of the white space on the right side of the browser window when the window is resized?

Question

I've scoured StackOverflow for an answer, but nothing I've tried has worked.

I have a container div with three inner divs stacked vertically with varying heights. When my browser window is maximized, it looks fine. When I make the window smaller and scroll right horizontally, there is a section of white space. How can I get rid of it? Thank you all in advance!

body {
min-width: 100%;
}

div#outer {
display: block;
position: absolute;
min-width: 100%;
}

div#top {
left: 0;
top: 0;
height: 100px;
width: 100%;
position: relative;
display: block;
}

div#middle {
left: 0;
top: 0;
height: 600px;
width: 100%;
position: relative;
display: block;
}

div#bottom {
left: 0;
top: 0;
height: auto;
width: 100%;
position: relative;
display: block;
}

HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="big">
    <div id="top">
    </div>

    <div id="middle">
    </div>

    <div id="bottom">
    </div>
</div>
</body>

set body min-width to pixel width, not percentage. see http://stackoverflow.com/questions/4612307/website-has-strange-whitespace-on-right-side-of-the-page-when-the-browser-is-res — Josh Nankin, Jan 09 '13 at 23:56

jackcogdill · Answer 1 · 2013-01-10T00:17:42.880

0

In the body, there are some default margins. You can remove everything like this:

body {
    min-width: 100%;
    margin: 0;
    padding: 0;
}

If you only want the sides' margin removed:

body {
    min-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

Does that work?

edited Jan 10 '13 at 00:17

answered Jan 10 '13 at 00:11

jackcogdill

4,900
3
30
48

No, it didn't. Thank you, though! – Monica Jan 10 '13 at 00:30
Wait is this all there is to the code or is this just a small example? – jackcogdill Jan 10 '13 at 00:58
A small example. I think I might just go with a grid system. – Monica Jan 10 '13 at 17:28

score 0 · Answer 2 · edited Jul 31 '20 at 11:09

0

html,body {
         margin: 0px;
         padding: 0px;
         overflow-x: hidden;
}

edited Jul 31 '20 at 11:09

Roberto Caboni

7,252
10
25
39

answered Jul 31 '20 at 10:05

Bimalka jayaweera

1
1

3

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Dima Kozhevin Jul 31 '20 at 10:29

How can I get rid of the white space on the right side of the browser window when the window is resized?

2 Answers2