Home/ Questions/Q 3405538
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T05:31:04+00:00

I’m trying to finish up the CSS and markup for my site (jonathanbuys.com), but

  • 0

I’m trying to finish up the CSS and markup for my site (jonathanbuys.com), but I have this annoying issue to clear up. For pages that have all of the text horizontally viewable without scrolling, my margin-bottom is correctly set for 30px. However, as soon as the content exceeds the horizontal size of the browser window, the margin-bottom disappears.

I’ve tested this out using Firefox, Safari, Chrome, and the Webkit nightlies, and it seems to only happen with Webkit-based browsers.

Here is the relevant CSS:

   #wrapper{
 width: 720px;
 height: auto;
 margin: 30px auto 30px auto;
 padding: 3em 3em 3em 3em;
 border: 1px solid #ccc;
 text-align: left;
 background: white;
 -webkit-box-shadow: 2px 2px 8px #aaa;
 -moz-box-shadow: 2px 2px 8px #aaa;
 box-shadow: 2px 2px 8px #aaa;
}

And the basic layout of the site:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="/css/style.css" type="text/css" />
</head>
 <body>
 <div id="wrapper">  

   <div id="sidebar">
    <div id="logobox">
    </div> 

    <div id="pages">
    </div> 
   </div> 

   <div id="content">
    <h2>Heading</h2>
    <p class="thin_line"></p>

    <div id="post">
     text
    </div>
   </div> <!-- End of content div -->

   <div id="footer">
    <p class="thin_line"></p>

   </div>
 </div>
 </body>
</html>

Any idea what I’m missing?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There’s probably some debatably-written passage in the spec that makes them handle it that way, or else it’s just a bug in WebKit. If you add 1px bottom padding to body your bottom margin will be show up — at least it does for after a tweak in the inspector, Chrome 6/OS X.

    • 0