Css - White Space that i cant resolve

Question

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>

eapo · Accepted Answer · 2015-02-26 21:05:11Z

1

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

answered Feb 26, 2015 at 21:05

eapo

1,0911 gold badge19 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harry Roper Over a year ago

When i remove the height parts though it then doesnt display the content?

eapo Over a year ago

please explain to me why are u using position: absolute”?

Bart Karp · Accepted Answer · 2015-02-26 22:57:38Z

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.

Collectives™ on Stack Overflow

Css - White Space that i cant resolve

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related