Div not appearing correctly

[lostprophetpunk]

Hello there,

 

I am in the final stages of coding my entire website. However, I have hit a snag on the front page. The footer appears to be halfway up the 'latest 3 blog entries', and I cannot seem to get it down.

 

I have tried 'clear:both;', and putting the code in different places, but nothing has worked. The relevant CSS and HTML code is below...

 

#blog {
        width: 855px;
        height: 200px;
        margin-top: 30px;
        margin-right: 15px;
        float: right;
        background: transparent url(../images/righticon.png) no-repeat top left;
}
#blog h1 {
        font-family: georgia;
        font-size: 1.6em;
        font-weight: normal;
        color: #25587E;
        margin-left: 60px;
        padding: 0px;
        margin-top: 6px;
}
#blog p {
        font-family: arial;
        font-size: 0.9em;
        line-height: 1.5em;
        color: #444444;
        margin-top: 5px;
}
#blog h4 {
        font-family: arial;
        font-size: 0.8em;
        color: #444444;
        padding: 0px;
        margin: 0px;
        margin-top: -10px;
        margin-bottom: 10px;
}
p.blogtitle a:link {
        margin: 0px;
        font-family: Georgia;
        font-size: 1.2em;
        text-decoration: none;
        color: #25587E;
}
p.blogtitle a:visited {
        margin: 0px;
        font-family: Georgia;
        font-size: 1.2em;
        text-decoration: none;
        color: #25587E;
}
p.blogtitle a:active {
        margin: 0px;
        font-family: Georgia;
        font-size: 1.2em;
        text-decoration: none;
        color: #25587E;
}
p.blogtitle a:hover {
        margin: 0px;
        padding: 0px;
        font-family: Georgia;
        font-size: 1.2em;
        text-decoration: underline;
        color: #25587E;
}
#blog span {
        font-family: arial;
        font-size: 0.8em;
        line-height: 1.5em;
        color: #444444;
        margin-top: 5px;
}

.blogroll {
        width: 285px;
        height: 200px;
        float: left;
}

#footer {
       width: 880px;
       height: 35px;
      padding-right:20px;
      text-align:right;
      margin:0;
       font-family: arial;
       font-size: 0.7em;
       color: #444444;
}

#footer a { color: #25587E; text-decoration: none; }
#footer a:visited { color: #25587E; text-decoration: none; }
#footer a:active { color: #25587E; text-decoration: none; }
#footer a:hover { color: #000000; text-decoration: none; }

 

    <div id="blog">
      <h1>From My Blog</h1>
    <div class="blogroll" style="width: 275px; padding-right: 10px;">
<?php //while (have_posts()): the_post(); ?>
<p class="blogtitle"><a href="<?php //the_permalink(); ?>" title="Read full post"><?php echo "Test Post";//the_title(); ?></a></p>
<h4>Latest Blog Post on <?php //the_time('jS F') ?>Tues, 4th</h4>
<span>I am a creative student based in the United Kingdom. I design and create beautiful things for the web. Three things are important to me when making the design...Standards Compliant Code, Functional Design, Usability and Accessibility.</span>
<?php //the_excerpt(); ?>
<?php //endwhile; ?>
    </div>
    <div class="blogroll" style="width: 275px; padding-left: 5px; padding-right: 5px;">
<?php //while (have_posts()): the_post(); ?>
<p class="blogtitle"><a href="<?php //the_permalink(); ?>" title="Read full post"><?php echo "Test Post";//the_title(); ?></a></p>
<h4>Latest Blog Post on <?php //the_time('jS F') ?>Tues, 4th</h4>
<span>I am a creative student based in the United Kingdom. I design and create beautiful things for the web. Three things are important to me when making the design...Standards Compliant Code, Functional Design, Usability and Accessibility.</span>
<?php //the_excerpt(); ?>
<?php //endwhile; ?>
    </div>
    <div class="blogroll" style="width: 275px; padding-left: 10px;">
<?php //while (have_posts()): the_post(); ?>
<p class="blogtitle"><a href="<?php //the_permalink(); ?>" title="Read full post"><?php echo "Test Post";//the_title(); ?></a></p>
<h4>Latest Blog Post on <?php //the_time('jS F') ?>Tues, 4th</h4>
<span>I am a creative student based in the United Kingdom. I design and create beautiful things for the web. Three things are important to me when making the design...Standards Compliant Code, Functional Design, Usability and Accessibility.</span>
<?php //the_excerpt(); ?>
<?php //endwhile; ?>
    </div>
    </div>
    <div id="footer" style="">
      <p>Design &#169; <?php echo date('Y');?> <a href="http://minihobbs.co.uk" title="Minihobbs">Minihobbs.co.uk</a></p>
    </div>
  </div>
</div>

</body>
</html>

 

If anyone could help out, thanks in advance.

[vinpkl]

i dont see any footer div in your html

 

and dont post php in html section. always post the html outputted by php. its helpful.

 

vineet

[lostprophetpunk]

i dont see any footer div in your html

 

and dont post php in html section. always post the html outputted by php. its helpful.

 

vineet

I have put the html for the footer. As you may be able to see if you look at the PHP code, nothing is actually outputting as it's all commented off.

[harkly]

I have it working for me with only the code you posted.

 

I get a sideways layout of 3 entries and then the footer at the bottom.

 

From My Blog

Latest Blog Post on Tues, 4th    Latest Blog Post on Tues, 4th      Latest Blog Post on Tues, 4th

                                                                                                                  Footer

 

 

 

 

[lostprophetpunk]

I have uploaded a pic of the problem. (Should be attached to this post)

 

I am working in firefox 3.5, it's the same in IE as well.

 

[attachment deleted by admin]

[harkly]

I am actually having the same issue, maybe someone out there can give us a clue as how to fix it.

 

Mine happens when I remove the 'height' from one of my div, which I need to do in order for it to be dynamic.

[harkly]

Fixed it with this

 

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/