Extra white space on right hand side on webpage

Question

I developed a site and it's working fine. It's just that when I view on smaller window a white space appear on the right hand side.

I found the cause is the width:76% set for div=middle. I tried removing the width and adjusting the middle layout using padding. Again it needs 76% of width to get fixed. Yet the extra space appears.

How to get rid of it? here I attached the css part and html of my scripting. Thanks in advance.

CSS:

body {
    font-family: Calibri;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.wrapper {
    min-height: 100%;
    position: absolute;
}
.left {
    background-image: url('images/SideTexture_01.png');
    background-repeat: repeat-y;
    width: 12%;
    height: 100%;
    position: absolute;
}
.middle {
    width: 76%; /* deactivated to remove extra space on right side */
    height: 100%;
    position: relative;
    float: right;
    margin-right: 12%;
    padding-left: 12%;
    z-index: 99px;
}
.header {
    background-color: #cf2122;
    width: 100%; /*774*/
    height: 30px;
    position: relative;
}
.footer {
    background-color: #373435;
    width: 100%; /*774*/
    height: 40px;
    text-align: justify;
    margin: 0 auto;
    clear: both;
}
.border {
    border: 1px solid #DFDFDF;
    padding: 5px;
}
.border-index {
    border: 1px solid #EAEAEA;
    padding: 10px;
}
.right {
    background-image: url('images/side_texture-2.png');
    background-repeat: repeat-y;
    width: 12%;
    height: 100%;
    position: absolute;
    float: left;
    z-index: -1;
    margin-left: 88%;
}
.disclaimer {
    color: #FFF;
    float: left;
    font-size: 9px;
    width: 60%;
    text-align: justify;
    padding-left: 10px;
    padding-top: 2px;
}
.copyright {
    color: #FFF;
    float: right;
    font-size: 9px;
    position: relative;
    float: right;
    width: 31%;
    padding-top: 15px;
}
A.menu-top:link {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu-top:active {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu-top:visited {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu-top:hover {
    COLOR: #FFFFFF;
    text-decoration: underline;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
.separate {
    font-size: 15px;
    color: #FFFFFF;
    FONT-FAMILY: Calibri;
}
A.menu:link {
    COLOR: #fff;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu:active {
    COLOR: #fff;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu:visited {
    COLOR: #fff;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu:hover {
    COLOR: #fff;
    text-decoration: underline;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
#body_content {
    padding: 0px;   
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #000000;
    padding-top: 12px;
    padding-bottom: 0px;
}
.require {
    font-family: Calibri;
    font-weight: bold;
    color: #CC0000;
}
td {
    font-family: Calibri;
    font-size: 12px;
    color: #3a3a3a;
}
th {
    font-family: Calibri;
    color: #3a3a3a;
}
.input {
    border: 0;
    color: #3a3a3a;
    font-size: 10px;
    text-align: left;
}
.input_contact {
    border: 1px solid #999999;
    background-color: #F6F7F1;
    color: #3a3a3a;
    height: 15px;
    font-size: 12px;
    width: 234px;
}
@media only screen and (max-width: 1280px) {
    td.search {
        width: 425px;
    }
}
@media only screen and (min-width: 1197px) {
    td.search {
        width: 180px;
    } 
}
@media only screen and (min-width: 1289px) {
    td.search {
        width: 170px;
    }
}
@media only screen and (min-width: 1346px) {
    td.search {
        width: 120px;
    }
    .copyright {
        width: 23%;
    }
    .body-content {
        padding-right: 250px;
    }
}
.textarea {
    border: 1px solid #999999;
    background-color: #F6F7F1;
    color: #3a3a3a;
    font-size: 12px;
}
.star {
    font-family: Tahoma;
    color: red;
    font-size: 16px bold;
}
.notice {
    font-family: Tahoma;
    color: #0066FF;
    font-size: 14px bold;
}
.error {
    font-family: Tahoma;
    color: #CC0000;
    font-size: 14px bold;
}
.require {
    font-family: Tahoma;
    font-weight: bold;
    color: #CC0000;
}
.about-us-image {
    width: 99%;
    height: 40%;
    background-image: url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png');
    z-index: -1;
}

HTML:

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginheight="0">
    <div class="wrapper">
        <div class="left"></div>
        <div class="middle">
            <div class="header top_menu"><?php include 'top-menu.php'; ?> </div>
            <div id="body_content">
                <table height="600" border="0" cellspacing="0" cellpadding="0" align="left">
                    <tr>
                        <td>
                            <table height="600" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td>
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td style="padding-top:10px; padding-left:50px; padding-right:50px; padding-bottom:230px; text-align:justify;">
                                                    <?php include('product-include.php'); ?>
                                                    <br />  <br />
                                                    <?php echo $row_RecTitle['FullTxt']; ?>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="footer" style="top:628px;">
                <?php include('footer.php'); ?>
            </div>
            <div class="right"></div>
        </div>
</body>

Update

Here I have added the image showing my problem

Image hidden for copyright purpose, This problem only when browser window resized.

Thanks again ..

You need to post all of the HTML code. If you want, render your site then view source and copy the resulting HTML. Please include it separately from the CSS. — Ian, May 16 '14 at 02:31
I feel that you are doing a lot of complex css just to get a center aligned content. I see that you have 2 images on the left and right; could you simplify the site by placing a background image on the body and then have a centered div? http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page — WhiteboardDev, May 16 '14 at 02:35
@WhiteboardDev I wanted to add the left and right images as one background image but the problem is the image on the left is gradient to the left and the image on the right is gradient to the right.I'm unable to make this effect by making them as whole background image.Gradient here I mean ,the image is lesser visible to the left and right respectively. — Lana, May 16 '14 at 03:27
@Lana you can see that the problem is the left div go under the middle when resizing the screen, it's a popular problem when using many divs beside each other to fit the window, the best solution is to use one div instead of three, your CSS code is so complicated and you can simplify it by using margin:auto; to make middle div in the middle, don't complicate it and try my solution again, i'm sure that you won't have this problem — MujtabaFR, May 16 '14 at 06:27

score 1 · Answer 1 · answered Mar 06 '19 at 01:39

1

In my project, I solved it with this

html {
    overflow-x: hidden;
}

answered Mar 06 '19 at 01:39

Char

2,073
8
28
45

score 0 · Answer 2 · edited May 17 '14 at 03:45

Try this .. I think it's the easiest way to do what you want . You can creat a div which will be the right side of the background, and the other side will be the ::before selector of the same div ...

In HTML

<body>
    <div class="bg"></div>
    <div class="middle">
        // Some HTML Text
    </div>
</body>

In CSS

body{
    margin: 0;
    padding: 0;
}
.bg::before{ 
    content:" ";
    top: 0;
    left: 0;
    width: 12%;
    height: 100%;
    background-image: url('images/SideTexture_01.png');
    background-repeat: repeat-y;
    position: fixed;
    z-index: 1;
}

.bg{
    top: 0;
    right: 0;
    width: 12%;
    height: 100%;
    background-image: url('images/SideTexture_02.png');
    background-repeat: repeat-y;
    position: fixed;
    z-index: 1;
}

.middle{
    background: #fff;
    margin: auto;
    width: 76%;
    position: relative;
    z-index: 10;
}

Hope this will help you ...

I appreciate your help,but no matter how I change the extra space on the right doesn't go off. — Lana, May 16 '14 at 04:30

score 0 · Answer 3 · edited Oct 01 '18 at 08:39

0

This will solve your issue:

html,body{
  margin:0;
  padding:0;
  overflow:auto;
  width:100%;
}

edited Oct 01 '18 at 08:39

Thomas Fritsch

9,639
33
37
49

answered Oct 01 '18 at 07:44

Sibaram Sahu

990
2
13
21

Extra white space on right hand side on webpage

Update

3 Answers3