fmz 14

I am working on a page that should expand with the content:

However, the white content area is flush with the footer. I set the bottom margin to 20px but it is being ignored.

I would appreciate another set of eyes to review this and help me get the space between the white box and the footer.

Here is the html (sans-content):

<div id="content">
<div id="blog-content">
<h2>Let Magic Happen Blog</h2>

<div class="entry-date">

<span class="day">15</span>
<span class="month">Dec</span>
<h3>Sample blog entry for your reading pleasure</h3>
<div class="post-info">
<img src="" alt=""/> Posted by Webmaster  | <img src="" alt="" /> 0 comments 

<div class="blog-summary">
<p>Summary content goes here.</p>
<br />
<p>Content goes here</p>
<br />
</div><!-- end blog-content -->
<br />
</div><!-- end content -->

Here is the CSS:

#blog-content    { 
width: 630px; 
padding: 20px;
margin-bottom: 20px;
position: relative;
top: 50px;
left: 10px; 
border: 1px solid #7f1212; 
background-color: #fff;  

Note: I am doing a sticky footer here which may have an impact on this.


3 answers


If you set the bottom margin on the #content div it gives space.

Answered over 8 years ago by Artistic Abode
  • I tried that but it didn't respond properly. I ended up adding 40px to the bottom of the #blog-content div and it worked. fmz over 8 years ago

You could also add a margin-top to the footer.

Answered over 8 years ago by Trevor Landau
Daniel 0

A much simpler solution is to remove the relative positioning on #blog-content, and instead use padding on #content. Put 50px top padding, and increase the 10px left padding to 20px.

I'd also remove the <br> between closing the divs, as it's not needed.

Answered over 8 years ago by Daniel