Get rid of excess space on right side of window

StackOverflow https://stackoverflow.com/questions/23276243

  •  09-07-2023
  •  | 
  •  

Question

How can I get rid of the excess space on the right side of the browser window?

In the picture below, Firebug has highlighted my #menuDiv div and the white portion on the right is not part of the border for that element. So where is it coming from? Perhaps the body?

enter image description here

When I look at the body element the same way, Firebug shows that it does indeed compass the extra space on the right. But it also shows that body has margins and padding of 0! What's going on here? And how can I fix it so that the page is centered?

enter image description here

(Btw, there is some empty space at the top because I've set body's height to 98% of the html for height sizing reasons.)

Demo

http://tuningcode.com/practice/2014-4-24-01.html.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Math Browser</title>
<style>
    html {
        font-family: "Cambria", "Arial", "Helvetica", sans-serif;
    }
    html, body {
        height: 100%;
    }
    body {
        height: 98%;
    }
    * {
        padding: 0;
        margin: 0;
    }
    .info-pane .section p {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    div {
        padding: 5px;
        outline: none;
    }
    #browserDiv, #infoDiv {
        overflow: auto;
        max-height: 600px;
    }
    #browserDiv, #infoDiv {
        float: left;
        margin: 1%;
        height: 85%;
    }
    #browserDiv {
        width: 46%;
        border: 1px solid black;
    }
    #infoDiv {
        width: 46%;
        border: 1px solid #47d;
    }
    #menuDiv {
        width: 95%;
        border: 1px solid goldenrod;
        height: 25px;
        margin: 1%;
        text-align: center;
    }
    #menuDiv h2.innerDiv {
        display: inline-block;
        vertical-align: middle;
    }
</style>
</head>
<body>
<div id="menuDiv"><h2 class="innerDiv">Math Browser</h2></div>
<div id="browserDiv"></div>
<div id="infoDiv"></div>
</body>
</html>
Was it helpful?

Solution

in css, width by default does not include padding or border, so two divs with width 48% and 1% margin will fit the width of their parent. the moment you add any padding or border, the combined width of your inner divs will be greater than 100%.

You can do two things:

1) set the box-sizing property of css, keeping in mind that there are some compatibility issues

#browserDiv, #infoDiv {
    box-sixing: border-box;
}

2) set the width/margin of a wrapper div, and use an inner div to set the padding/border.

<div class="wrapper"><div id="browserDiv"></div></div>
<div class="wrapper"><div id="infoDiv"></div></div>

.wrapper {
    width: 48%;
    margin: 0 1%;
}
#browserDiv, #infoDiv {
    padding: 5px;
}
#browserDiv {
    border: 1px solid blue;
}
#infoDiv {
    border: 1px solid red;
}

I'm a bit of a dinosaur, so I tend to use the latter.

OTHER TIPS

I pasted your sample into JSFiddle. It looks like at least part of the problem is this:

#menuDiv {
    width: 95%;
    border: 1px solid goldenrod;
    height: 25px;
    margin: 1%;
    text-align: center;
}

The width: 95%; isn't working out quite right. Simply removing this seemed to do the trick.

your culprit:

#menuDiv {
    width: 95%;
}

using display:block magic (default for all <div>'s), you don't need to set width to get full width

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top