CODEWITHSUNDEEP
htmlcsswhitespace
Harry Roper
Harry Roper

Reputation: 1

Css - White Space that i cant resolve

Ive looked all over the web including scouring the entirety of stack overflow but everything ive tried simply does not work.

My html and css code is as follows. the problem is a large white space occupying the bottom of the page. 

body
{
  background-image: url("img/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.box
{
  position: absolute;
  right: 0px;
  width: 80%;
  top: 20%;
  background-image: url("img/box.png");
  background-repeat: no-repeat;
  background-size: 80%;
  height: 100%;
}
.box img{
  display: block;
}
.explore
{
  vertical-align: top;
  position: absolute;
  right: 42%;
  width: 10%;
  top: 70%;
  background-image: url("img/explore.png");
  background-repeat: no-repeat;
  background-size: 80%;
  height: 100%;
}
.explore img {
  display: block;
}
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Harry Roper Design</title>
  </head>

  <body>
    <div class = "box"></div>
    <div class = "explore"></div>
  </body>
</html>

Upvotes: 0

Views: 83

Answers (2)

Bart Karp
Bart Karp

Reputation: 659

Looks like there's no white space.

I've used dummy images to emulate your website and added borders to div elements so you will be able to see what's going on:

http://jsfiddle.net/9xcwjxb6/

Firstly - setting top: 70%; and height: 100%; moves your .explore div 70% down the page AND sets its height at 100%, it means you're ending up with the total height of 170% and thats where comes your "white space" from (which is, in fact, not white space, but your .explore element).

I think you should read more about centering in CSS because I guess that's what you've tried to achieve here.

The proper solution should look closer to this:

body {
  background: url("http://dummyimage.com/2000x2000/999999/fff&text=+") no-repeat;
}

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -300px;
    text-align: center;
    width: 600px;
}

.box {
  background: url("http://dummyimage.com/600x400/000/fff") no-repeat;
  height: 400px;
}

.explore {
  display: inline-block;
  margin: 20px 0 0 0;
  background: url("http://dummyimage.com/200x50/000/fff") no-repeat;
  width: 200px;
  height: 500px;
}

See it live

Or you could use flexbox if you don't care about support for older browsers.

Upvotes: 0

eapo
eapo

Reputation: 1081

You should remove the height: 100%; from your CSS to resolve the "large white space occupying the bottom of the page" problem.

And there is no accepptable reason to use two div as body content with absolute positioning in CSS

Upvotes: 1

Related Questions