I Have Some Empty Space At The Bottom Of My Website and I Don't Know How To Get Rid Of It?

Question

CAUTION: This is my first website and you will laugh at how terrible this code probably is.

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Men of God</title> <meta name="keywords" content="free design template, download web templates, Sunset Website, XHTML, CSS" /> <meta name="description" content="Sunset - Free CSS Template, Free XHTML CSS Design Layout" /> <link href="templatemo_style.css" rel="stylesheet" type="text/css" /> <link href="fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" /> <link href="sliderstyle.css" type="text/css" rel="stylesheet"> <link href="normalize.css" type="text/css" rel="stylesheet"> <script src="js-image-slider.js" type="text/javascript"></script> <script type="text/javascript" src="fullsize/jquery.js"></script> <script type="text/javascript" src="fullsize/jquery.fullsize.minified.js"></script>
<script language="javascript" type="text/javascript"> $(function(){ $("div.templatemo_gallery img").fullsize(); }); </script> </head> <body> <div id="templatemo_container"> <div id="templaetmo_header"> <div id="templatemo_header_logo_area">

                <div id="templatemo_header_logo">
                    Men of God
                </div>

                <div class=" cleaner"></div>

                <div id="templatemo_header_slogan">
                   Antelope Valley
                </div>
        </div>

    </div><!-- end of header -->
     <div class="cleaner"></div>
   <div id="templatemo_menu">

            <ul>
                    <li><a href="#" class="current">HOME</a></li>
                    <li><a href="About-us.html">ABOUT US</a></li>
                    <li><a href="#" target="_parent">PHOTOS</a></li>
                    <li><a href="#">TESTIMONY'S</a></li>
                    <li><a href="#">CALENDAR</a></li>
                    <li><a href="#" class="last">CONTACT</a></li>
            </ul> 
    </div> 

  <div id="templatemo_content_area">


    <div class="templaetmo_3_col">
        <div class="templatemo_title_left">

            <h1>WELCOME</h1>
            <h3>To Our</h3>
        </div>

        <div class="templatemo_title_right">
            Journey
        </div>

        <div class="cleaner"></div>
        <div id="spacing-paragraph"><p>We are located in antelope valley and have a passion for god. come check us out yo, ya know what i sayin?</p></div>

        <h1>Schedule</h1>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>

        <ul class="templaetmo_list">
            <li>Phasellus tincidunt</li>
            <li>Tortor lacinia blandit</li>
            <li>Commodo nunc augue</li>
            <li>Mattis eros</li>
            <li>Convallisest augue</li>
            <li>Nunc ante erat</li>
        </ul>


    </div>

    <!--start-->
    <div class="photos"><h1>Latest Photos</h1></div>

                    <div class="description-text">
                        <h2>Hiking At Campmay</h2>
                        <p>This was great experience for all of us. Our walk with<br /> god is only getting stronger!</p>
                    </div>
                </div>
            </li>
            <li>
                <img src="images2/2.jpg" />
                <div class="description">

                    <div class="description-text">
                        <h2>Slideshow Title 2</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li>
                <img src="images2/3.jpg" />
                <div class="description">

                    <div class="description-text">
                        <h2>Slideshow Title 3</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li>
                <img src="images2/4.jpg" />
                <div class="description">

                    <div class="description-text">
                        <h2>Slideshow Title 4</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li>
                <img src="images2/5.jpg" />
                <div class="description">

                    <div class="description-text">
                        <h2>Slideshow Title 5</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div><!--slider-->


    <div class="templaetmo_3_col templatemo_3_col_middle">
        <!--where i deleted stuff-->
            <div class="cleaner"></div>
        </div>  



        <div class="cleaner"></div>





    </div>

    <div class="contact-paragraph">
    <h1>Join Us</h1>
    <img src="images/templatemo_img_1.jpg" width="300" height="75"/>
    <p id="paragraphjoinus">We have new men come in and out all the time if you are interested feel free to stop by. You can email us if you have any questions or want to hear more about us.</p></div><ul class="paragraphmenu">
    <li>Phone Number: 555-889-9876</li>
    <li>email: @hopechapel</li>
    <li>location:gkhg gf jfg hdf5675r west gfdtlane.</li>
    </ul>




        <div class="cleaner"></div>


      <div class="templatemo_more"></div>
        <div class="cleaner"></div>


    <div class="cleaner"></div>
  </div><!-- End Of Content area-->

  <div id="templatemo_footer">

  </div>

</div>

</body> </html>

Templatemo_style.css

html {

background: #000;
margin: 0;

}

body { margin: 0; padding:0; font-family: Tahoma, "Trebuchet MS", Verdana; font-size: 12px; line-height: 1.5em; width: 100%; display: table; background: url(images/templatemo_header.jpg) center top no-repeat #000; background-size: 1000px; border: 5px solid #000; }

a:link, a:visited { color: #FFFFFF; text-decoration: underline; } a:active, a:hover { color: #FFFF00; text-decoration: none; }

p { font-family: Tahoma, "Trebuchet MS", Verdana; font-size: 11px; color: #777; text-align: justify; margin: 0 0 20px 0; }

h1 { font-family: Tahoma, "Trebuchet MS", Verdana; font-size: 25px; color: #b0b0b0; font-weight: normal; margin: 0 0 15px 0; }

h2 { font-family: "Times New Roman", Times, serif; font-size: 14px; color: #ac6c07; margin: 0 0 10px 0; }

h3 { font-family: Tahoma; font-size: 13px; color: #a18800; font-weight: normal; margin: 0 0 3px 0; }

templatemo_container {

width: 960px;
height: 0px;
margin: auto;

}

templaetmo_header {

width: 960px;
height: 380px;
margin: 0;
padding: 0;

}

templatemo_header_logo_area {

width: 350px;
height: 75px;
margin: 70px 0 0 50px;

}

templatemo_header_logo{

float: left;
color: #fff;
font-size: 40px;
text-indent: 50px;
font-family: 'Droid Serif', serif;
margin: 0 0 5px 0;

}

templatemo_header_slogan {

float: right;
font-family: "Brush Script MT", Arial;
font-size: 25px;
font-style: italic;
color: #fff;
margin: 0;
padding-top: 18px;

}

/* menu */

templatemo_menu {

float: left;
width: 960px;
height: 25px;
background: url(images/templatemo_menu_bg.jpg);
padding:0;
margin: 0px 0 25px 25px;

}

templatemo_menu ul {

float: left;
margin: 0 0 0 30px;
padding: 0 0 0 0;
width: 960px;
list-style: none;

}

templatemo_menu ul li {

display: inline;

}

templatemo_menu ul li a {

float: left;
padding: 5px 40px 0 40px;

height: 20px;
text-align: center;
font-size: 24px;
text-align: center;
text-decoration: none;
color: #b0b0b0; 
font-family: 'Droid Serif', serif;
font-size: 13px;
outline: none;

}

templatemo_menu li a:hover, #templatemo_menu li .current {

color:#ffd800;

}

templatemo_menu li .last {

background: none;

}

/* end of menu*/

templatemo_content_area {

width: 960px;

}

.templatemo_title_left { float: left;
width: 116px; height: 46px; }

.templatemo_title_right { float: right;
width: 165px; height: 40px; color: #d89300; font-family: Tahoma; font-size: 45px; margin: 0; padding: 6px 0 0 0; }

.templatemo_title_left h1 { float: left; display: block; font-family: Tahoma; font-size: 25px; color: #e17638; font-weight: normal; margin: 0 0 2px 0; }

.templatemo_title_left h3 { font-family: Tahoma; font-size: 20px; color: #fff; font-weight: normal; display: block; float: right; }

.templaetmo_3_col { float: left; width: 290px; padding: 10px 5px; margin-right: 45px; }

.templaetmo_3_col img { border: 2px solid #000000; margin: 0 0 15px 0; } .templatemo_3_col_middle { margin: 0 30px; width: 271px; padding: 10px;

}

.templaetmo_3_col .templatemo_gallery img{ border: 5px solid #3D3C3C; }

.templatemo_3_col_middle img { float: left; border: none; }

.templatemo_3_col_middle img.img_middle { margin: 0 8px; }

.templatemo_more{ float: right; color: #777; font-size: 11px; margin: 0 10px 0px 0; }

.templatemo_more a{ text-decoration: none; color: #777; }

.templatemo_more a:hover{ text-decoration: underline; }

.templatemo_more_2{ float: left; color: #b0b0b0; font-size: 10px; margin: 0 10px 10px 0; background: url(images/templatemo_more.png) no-repeat ; padding: 0 0 0 10px ; background-position: 0 7px; }

.templatemo_more_2 a{ text-decoration: none; color: #777; }

.templatemo_more_2 a:hover, .templatemo_more_2:hover{ text-decoration: underline; }

templatemo_footer {

width: 100%;
color: #b0b0b0;
margin: 0;
padding: 10px 0;
text-align: center;

}

.templaetmo_list { list-style: none; padding: 0 0 0 25px; }

.templaetmo_list li { color: #777777; font-family: Tahoma; font-size: 11px; background: url(images/templatemo_bullet.jpg) no-repeat; background-position: 0 6px; padding: 0 0 0 15px; margin: 0 0 10px 0 ; }

.cleaner { clear: both; height: 0; margin-right: 300px; margin-top:0px; margin-left: 0px; padding: 0;

}

.photos h1 { margin-right: 10px; margin-left: 0px; margin-top:20px; position: relative; display: inline-block; left: 10px; } .templaetmo_3_cul h1 img { float: left; width: 290px; padding: 10px 5px; right: 100px; position: absolute;

}

suptho {

right: 0px;
left: 700px;
bottom: 390px;
position: relative;
border: dashed 5px grey;
overflow: hidden;
display: table;

} .contactusok { right: 0px; left: 700px; bottom: 390px; position: relative; display: table;

} .contact-paragraph { right: 0px; left: 800px; bottom: 410px; position: relative; display: table; } .contact-paragraph h1 { margin-left: -100px; }

paragraphjoinus {

margin-right: 650px;
position: relative;
left: -100px;
display: table;

} .contact-paragraph img { margin: 20px; margin-top:10px; MARGIN-LEFT: 10px; position: relative; left: -110px; border: 5px dashed grey; }

#spacing-paragraph {
    margin-bottom: 55px;
    display: relative;
}

.paragraphmenu { list-style: none; padding: 0 0px 0 10px; margin-right: 0px; left: 720px; bottom: 410px; display:table; position: relative; overflow: hidden; } .paragraphmenu li { color: #777777; font-family: Tahoma; font-size: 11px; background: url(images/templatemo_bullet.jpg) no-repeat; background-position: 0 6px; padding: 0 0 0 15px; margin: 0 0 10px 0 ; }

/--------------------------ABOUT-US----------------------------------------------/

.H1_ABOUT-US h1 { width:300px; padding: 100px; margin-top: 0px; margin-bottom: 0px; margin-left: 490px; margin-right: 0px; float:inherit; word-wrap: break-word; font: 32px 'leagueGothicRegular'; color: #d89300; text-shadow: 0px 1px 1px #4d4d4d; } .H1_ABOUT-US p { height:300px; width:375px; display: block; margin-left: 500px; margin-right: 0px; margin-bottom:50px; margin-top: -50px; font-size: 24px; line-height: normal; padding: 10px; text-align: auto; float: left; word-wrap: break-word; overflow: hidden; position: relative; }

pictureofbob img{

padding: 10px;
margin-right: 0px;
margin-left: 10px;
margin-top: -170px;
margin-bottom: 50px;
width: 500px;
height: 400px;
float: left;
display: block;
position: absolute;
right: 450px;

}

Sliderstyle.css

.slider {

display: inline-block;
height: 320px;
min-width: 100px;
max-width: 300px;
margin: inherit;
position: relative;

}

.sliderinner { width: 100%; height: 100%; overflow: hidden; position: relative; }

.sliderinner>ul { list-style: none; height: 100%; width: 1700px; overflow: visible; position: relative; left: 0px; -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); }

.sliderinner>ul>li { width: 20%; height: 320px; float: left; position: relative;

}

.sliderinner>ul>li>img { margin: auto; margin-right:210px; height: 65%; }

.slider input[type=radio] { position: absolute; left: 50%; bottom: 15px; z-index: 100; visibility: hidden; }

.slider label { position: absolute; left: 50%; bottom: -45px; z-index: 100; width: 12px; height: 12px; background-color:#ccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8); box-shadow: 0px 0px 3px rgba(0,0,0,.8); -webkit-transition: background-color .2s; -moz-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; }

.slider input[type=radio]#control1:checked~label[for=control1] { background-color: #333; } .slider input[type=radio]#control2:checked~label[for=control2] { background-color: #333; } .slider input[type=radio]#control3:checked~label[for=control3] { background-color: #333; } .slider input[type=radio]#control4:checked~label[for=control4] { background-color: #333; } .slider input[type=radio]#control5:checked~label[for=control5] { background-color: #333; } .slider label[for=control1] { margin-left: -36px } .slider label[for=control2] { margin-left: -18px } .slider label[for=control4] { margin-left: 18px } .slider label[for=control5] { margin-left: 36px } .slider input[type=radio]#control1:checked~.sliderinner>ul { left: -11% }/this is where i work/ .slider input[type=radio]#control2:checked~.sliderinner>ul { left: -123% } .slider input[type=radio]#control3:checked~.sliderinner>ul { left: -234% } .slider input[type=radio]#control4:checked~.sliderinner>ul { left: -350% } .slider input[type=radio]#control5:checked~.sliderinner>ul { left: -463% }

.description { position: absolute; bottom: 0; left: 0; width: 100%; font-family:Archivo Narrow; z-index: 1000; } .description-text { background-color: rgba(0,0,0,.8); padding:10px; top: 0; z-index: 4; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; color: #fff; }

Answer 1 · 2014-07-29T22:22:40Z

July 29, 2014 10:22pm

I'd try to help you, but this is so hard to read. Could you upload your files to Mediafire or something like that?

Welcome to the Treehouse Community

Looking to learn something new?

Nathan Begnaud