My content won’t push the footer down

0 Views

It seems I have a problem with my footer. My Content div won’t push the footer down. It just go through it. I have been searching the net for days now (even stackoverflow), but I can’t seem to find a solution. If anyone can help me, I would really appreciate it. I have tryed to clean up the html, so it would be easier to help me, however, If you like the original code, go to http://djstarkick.com/where-we-belong. (You will also see the problem with the footer.

HTML code:

Read More
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>StarKick</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">
</head>

<body>
<div class="background">
  <div class="Container">
    <div class="Header">
      <div class="Slideshow">

        <div class="TopLine"></div><!--TopLine-->

        <div class="NewMusic">       

        <div class="NewMusicText"></div><!--NewMusicText-->
        </div><!--NewMusic-->

        <div class="WhereWeBelongPodcast">       

        <div class="WhereWeBelongPodcastText"></div><!--WhereWeBelongPodcastText-->
        </div><!--WhereWeBelongPodcast-->

<div class="Meny">
  </div>
</div><!-- Meny-->



      </div><!--Slideshow-->

      <div class="HeaderLine"></div><!--HeaderLine-->
          <div class="Logo"></div><!--Logo-->


    </div><!--Header-->
    <div class="MainContent">


    <div class="TwitterPost">
      <div class="TwitterFeed">
  </div><!--TwitterFeed-->
    </div><!--TwitterPost-->

    <div class="Content">
          <div class="contentbackground">


          <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <hi><?php the_title(); ?></h1>
        <?php the_content(); ?>
    <?php endwhile; endif; ?> <!--Wordpress-->


          </div><!--Contentbackground-->
    </div><!--Contentline-->
    </div><!--Content--> 
    </div><!--MainContent-->



    <div class="Footer"></div><!--Footer-->  

  </div><!--Container-->

</div><!--Background-->
</body>
</html><!-- -->

CSS code: 

/*
Theme Name: StarKick - Where We Belong
Theme URI: djstarkick.com
Author: Dani Møllerplass
Author URI: djstarkick.com
Description: My first theme on wordpress for my own use. 
Version: 1.0
*/

@charset "utf-8";
body {
    margin: 0;
    padding: 0;
    background-color:#000

}
.background {
    height: 1080px;
    width: 1920px;
    background-image: url(Pictures/Background/background.png);
    background-repeat: no-repeat;
    position: relative;
    top: 0px;
}
.Container {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 0px;
}
.Header {
    height: 560px;
    width: 980px;
    position: relative;
}
.HeaderLine {
    height: 45px;
    width: 980px;
}
.Share {
    height: 55px;
    width: 265px;
    position: absolute;
    top: 5px;
    left: 345.5px;
}
.Logo {
    height: 182px;
    width: 408px;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    bottom: 25px;
    left: 291px;
}
.Meny {
    height: 50px;
    width: 545px;
    position: absolute;
    top: 150px;
    left: 217.5px;
}
.MenyText {
    height: 50px;
    width: 545px;
    position: absolute;
    top: 7.5px;
}
.MainContent {
    width: 980px;
    position: relative;
    height: auto;
}

.Content {
    width: 625px;
    height: auto;
    left: 0px;
    top: 0px;
    float: left;
}
.Contentline {
    height: 45px;
    width: 625px;
    top: 0px;
}
.contentbackground {
    width: 625px;
    background-repeat: repeat-y;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
    left: 0px;
    background-color: #000;
    position: relative;
}

.Footer {
    height: 150px;
    width: 980px;
    font-family: "high Tower Text";
    color: #FFF;
    text-align: center;
    position: relative;
    clear: both;
}


.TwitterPost {
    height: 650px;
    width: 325px;
    right: 0px;
    float: right;
}

.TwitterFeed {
    height: 600px;
    width: 323px;
    position: absolute;
    top: 29px;
    right: 1px;
}



.Slideshow {
    height: 450px;
    width: 980px;
    position: relative;
}
.NewMusic {
    height: 53px;
    width: 332px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}
.NewMusicText {
    height: 53px;
    width: 300px;
    position: absolute;
    left: -5px;
    bottom: 3px;
}
.TopLine {
    height: 397px;
    width: 980px;
    position: absolute;
    top: 0px;
}
.WhereWeBelongPodcast {
    height: 53px;
    width: 332px;
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.WhereWeBelongPodcastText {
    height: 53px;
    width: 300px;
    position: absolute;
    right: -15px;
    bottom: 0px;
}


a:link { 
    color: #FFF;
    text-decoration: none;
    }
a:visited { 
    color: #FFF;
    text-decoration: none;
    }
a:hover { 
    color: #CCC;
    text-decoration: none;
    }
a:active {
    color: #FFF;
    text-decoration: none;
    font-family: "high Tower Text";
    text-align: center;
    }

.background .Container .Header .Slideshow .Meny .MenyText table tr td {
    color: #FFF;
    font-family: "high Tower Text";
    text-align: center;
}
.year {
    font-size: 22px;
}

Thanks in advance! 🙂

Post Views: 0

Related posts

Leave a Reply

2 comments

  1. Add a div right before your footer class that is inside of your MainContent div like so

    EDIT: Also, remove the height from your ContentLine div

    HTML

    <div class="clearFloat"></div>

    CSS

    .clearFloat { clear: both;}