CODEWITHSUNDEEP
htmlcss
yahoo5000
yahoo5000

Reputation: 458

White space at the bottom of page nothing helps

I have white space on the bottom of my page. I have tried various ways that have helped others, but none work for me, including padding, margin, height, auto and others.

Here is my code:

.profwindow {
    position: relative;
    left: 40px;
    float: left;
    width: 250px;
    top: 50px;
    height: 200px;
    background-color: rebeccapurple;
}

.chatwwindow {
    position: relative;
    left: -210px;
    float: left;
    height: 370px;
    width: 250px;
    top: 280px;

    background-color: red;
}

.mapwindow {
    position: relative;
    float: right;
    width: 1000px;
    height: 560px;
    right: 10px;
    background-color: red;
    top: -430px;
        
}

.navigation {
        position: relative;
    float: right;
    right: 10px;
    top: -460px;
    height: 150px;
    width: 1000px;
    background-color: red;
}

#mainphplogo {
    position: relative;
    width: 20%;
    left: 40px;
    top: 20px;
    background-color: red;
}
<!DOCTYPE html>
<html lang="lt">
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div id="mainphplogo">
    <a href="index.php"><img src="images/logo.png" height="100px"  ></a>
    </div>
    <div class="profwindow"></div>
    <div class="chatwwindow"></div>
    <div class="navigation"></div>
    <div class="mapwindow"></div>
    
</body>
</html>

This is the smallest code code example that demonstrates the issue affecting the page, and as you can see, there is a black & white space at the end of page, which I have not able to remove.

Upvotes: 0

Views: 152

Answers (3)

Greg2518
Greg2518

Reputation: 42

By adding

html{
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
}

to your css file I was able to get the blank space at the bottom to go away. 

html{
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
}
.profwindow {
    position: relative;
    left: 40px;
    float: left;
    width: 250px;
    top: 50px;
    height: 200px;
    background-color: rebeccapurple;
}

.chatwwindow {
    position: relative;
    left: -210px;
    float: left;
    height: 370px;
    width: 250px;
    top: 280px;

    background-color: red;
}

.mapwindow {
    position: relative;
    float: right;
    width: 1000px;
    height: 560px;
    right: 10px;
    background-color: red;
    top: -430px;
        
}

.navigation {
        position: relative;
    float: right;
    right: 10px;
    top: -460px;
    height: 150px;
    width: 1000px;
    background-color: red;
}

#mainphplogo {
    position: relative;
    width: 20%;
    left: 40px;
    top: 20px;
    background-color: red;
}
<!DOCTYPE html>
<html lang="lt">
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div id="mainphplogo">
    <a href="index.php"><img src="images/logo.png" height="100px"  ></a>
    </div>
    <div class="profwindow"></div>
    <div class="chatwwindow"></div>
    <div class="navigation"></div>
    <div class="mapwindow"></div>
    
</body>
</html>

Upvotes: 0

yahoo5000
yahoo5000

Reputation: 458

Okay i solve this kind a simple method made a new two divs for right and left side and insert into them right and left side divs like this : 

.profwindow {
    position: relative;
    left: 40px;
    
    width: 250px;
    top: 50px;
    height: 200px;
    background-color: rebeccapurple;
}

.chatwwindow {
    position: relative;
    left: 40px;
    height: 370px;
    width: 250px;
    top: 75px;

    background-color: red;
}

.mapwindow {
    position: relative;
    top: 40px;
    width: 1000px;
    height: 560px;
    background-color: red; 
}

.navigation {
    position: relative;
    top: 20px;
    height: 150px;
    width: 1000px;
    background-color: red;
}

.mainleft {
    float: left;
    background-color: aqua;
    position: relative;
    width: 300px;
    height: 800px;
}

.mainright {
    right: 10px;
    float: right;
    background-color: aqua;
    position: relative;
    width: 1000px;
    height: 800px;
}
<!DOCTYPE html>
<html lang="lt">
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div class="mainleft">
        <div id="mainphplogo">
        <a href="index.php"><img src="images/logo.png" height="100px"  ></a>
        </div>
        <div class="profwindow"></div>
        <div class="chatwwindow"></div>
    </div>
    <div class="mainright">
        <div class="navigation"></div>
        <div class="mapwindow"></div>
    </div>
</body>
</html>

Upvotes: 0

LordNeo
LordNeo

Reputation: 1182

First suggestion: switch to a responsive design using bootstrap grid or something similar.

For your concrete issue, removing the

float: right;

from .mapwindow will fix the extra whitespace because floating it sets the intial point far at the bottom and you're getting it up back with the

top: -430px;

So the initial position is still kept

Upvotes: 1

Related Questions