Whitespace at the bottom of the web page


I’m creating a web site and I am seeing a whitespace at the bottom of the web page. Please give my some help on getting rid of this whitespace. Below is the html code.

<!--<html lang="en">-->

<meta charset="utf-8">
<!--<meta http-equiv="content-type" content="text/html; charset="utf-8">-->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

<!--[if lt IE 9]>
		<script src="../documentation/assets/js/html5.js"></script>

<!-- LayerSlider stylesheet -->
<link rel="stylesheet" href="../css/layerslider.css" type="text/css">
<link rel="stylesheet" type="text/css" href="../css/screen_styles.css" />
<link rel="stylesheet" type="text/css" href="../css/screen_layout_large.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="../css/screen_layout_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="../css/screen_layout_medium.css" />
<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<!-- External libraries: jQuery & GreenSock -->
<script src="../layerslider/js/jquery.js" type="text/javascript"></script>
<script src="../layerslider/js/greensock.js" type="text/javascript"></script>

<!-- LayerSlider script files -->
<script src="../layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="../layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<script src="js/slider1.js" type="application/javascript"></script>

<!-- Meganizr Menu Styles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Play" rel="stylesheet" type="text/css">
<link href="../css/mega_menu1.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><link href="css/meganizr-ie.css" rel="stylesheet" type="text/css"><![endif]-->
<!-- end Meganizr Menu Styles -->

	<div class="modernizr"> 
  <!-- LayerSlider start -->
  	<div id="layerslider" style=" height: 223px; max-width: 1024px;" >
        <div class="top_bkgd">
      		<header> <a class="logo" href="#"></a> </header>
    <!-- The contents on your slider will be here --> 
    <!--first slide -->
    <div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all; transition2d: all;"> 
      <!-- slide background image --> 
      <img src="sliderImages/pr_img01.jpg" class="ls-bg" alt="Slide background"> </div>
    <!-- slide one end --> 
    <!--second slide -->
    <div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all; transition2d: all;"> 
      <!-- slide background image --> 
      <img src="sliderImages/pr_img02.jpg" class="ls-bg" alt="Slide background"> </div>
    <!--third slide -->
    <div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all; transition2d: all;"> 
      <img src="sliderImages/pr_img03.jpg" class="ls-bg" alt="Slide background"> </div>
    <!--fourth slide -->
    <div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all; transition2d: all;"> 
      <img src="sliderImages/pr_img04.jpg" class="ls-bg" alt="Slide background"> </div>
  <!-- Meganizr Menu HTML -->

    <ul class="meganizr mzr-prone mzr-slide mzr-responsive">
      <!-- Home -->
      <li><a href="#">HOME</a></li>
      <!-- end Home --> 
      <!-- No Dropdown Link -->
      <li><a href="#">WHO WE ARE</a></li>
      <!-- end No Dropdown Link --> 
      <!-- No Dropdown Link -->
      <li><a href="#">PROJECTS</a></li>
      <!-- end No Dropdown Link --> 
      <!-- DropDown --> 
      <!-- For more drop levels follow the structure bellow. --> 
      <!-- You can also use the class .mzr-align-right to show the dropdown on the right. -->
      <li class="mzr-drop mzr-levels"> <a href="#">SERVICES</a>
          <li><a href="#">Web Development</a></li>
          <li class="mzr-drop"> <a href="#">Customized E-Learning</a> 
            <!-- <ul>
                            <li><a href="#">Second Level</a></li>
                            <li><a href="#">Second Level</a></li>
                            <li><a href="#">Second Level</a></li>
                            <li class="mzr-drop">
                                <a href="#">Second Level</a>
                                    <li><a href="#">Third Level</a></li>
                                    <li><a href="#">Third Level</a></li>
                                    <li><a href="#">Third Level</a></li>
                                    <li><a href="#">Third Level</a></li>
                                    <li><a href="#">Third Level</a></li>
                            <li><a href="#">Second Level</a></li>
          <li><a href="#">Web Applications</a></li>
          <li><a href="#">Technical Support</a></li>
      <!-- end DropDown --> 
      <!-- Contact Form -->
      <li class="mzr-drop mzr-contact mzr-align-right"> <a href="#">CONTACT US</a>
        <div class="mzr-content drop-two-columns">
          <div class="two-col">
            <form action="#" method="#" id="mzr-contact-form">
              <input type="text" name="name" id="name" placeholder="Name">
              <input type="email" name="email" id="email" placeholder="email@email.com">
              <textarea name="message" id="message" placeholder="Message"></textarea>
              <input type="submit" value="Send Message">
      <!-- end Contact Form -->

  <!-- end Meganizr Menu HTML -->
  <div class="content_bkgd">
      <p>We specialize in web development, customizing e-learning courses, brand management, graphic design, user interface design and mobile web development.  Our team will work diligently to ensure your satisfaction.  The goal is to provide our client’s with the most satisfying, stress-free and rewarding experience, because we value your business and want to develop a great partnership. We will collaborate and communicate with your team on every phase of the project.  Allow us to be your guide in developing your next project and bringing your vision to fruition.</p>
    <div class="promo_container">
          <div class="promo one"></div>
          <div class="promo two"></div>
          <div class="promo three"></div>
 	<div class="clear-fix"></div>
  <div class="footer_bkgd">
    <footer>2014 &copy; Prone Interactive Media, LLC</footer>


Can you give us a website or reproducable HTML/CSS to go off of…? We have nothing to base our answers off of. You probably need to put a CSS reset in your stylesheet since there is probably margin still on the <body> element.

Thanks for the tip. I have more than four stylesheets attached to this web site for the sake of making it responsive.

Can you post your website link so I can see what’s causing the white-space?

I just checked my body element and its margin: 0; padding: 0; I’ll go ahead and post the website link.


Might be margin set elsewhere. Still need htat website link.

Edit-You need to format your code in your first post (should have mentioned you did that)…I’ll get a moderator to format it :smile:

Done :wink:

Hey Ryan!

Here’s that website link: http://www.jquerymobile.host56.com/proneim/layerslider/index.html. Sorry for not formatting the code.


The only white-space that is present (depending if your screen is big enough) is only because there is not enough content for the full page. No margin errors or anything like that. Add a lot of random content and you’ll see hte space go away.

@cpradio You’re always on top of it.

Ok, great! Thanks for helping me with this issue. Thanks for the quick response as well!

Don’t thank me, thank my lack of social skills :wink: . You’re welcome.

Hey Ryan,

I placed more text inside the article element and the web page increased in size, but the footer div remained stationary. Please advise.


I figured it out.

This topic was automatically closed 1 minute after the last reply. New replies are no longer allowed.