Question

I’m making a website in HTML, CSS, and PHP and the page goes way beyond the screen but there is no scroll bar provided by the browser (Safari 5.0.6 and Firefox 14.0.1 on Mac). Is it because I included the PHP? But shouldn’t that be there before the page is rendered?

Here is a link: test website

My PHP syntax:

<div id="content">
        <div class="wrapper">
            <div id="home" class="alert">
                Welcome to always4free&copy;! To browse the classifieds, you must first either choose a location or have your location detected.
            </div>
            <?php include "res/pages/categories.php"; ?>
        </div>
    </div>
</div>

What is going on?

EDIT: Here is my CSS:

    body {
    background-image: url("http://always4free.org/site/images/bg.jpg");
    background-size: cover;
    font-family: "Mouse Memoirs",sans-serif;
}
.wrapper {
    margin: 0 auto;
    width: 850px;
}
#header {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid green;
    box-shadow: 0 2px 10px #888888;
    height: 50px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
#logo {
    color: rgba(255, 255, 255, 0.7);
    float: left;
    font-family: "Wendy One",sans-serif;
    font-size: 30px;
    line-height: 50px;
    width: 250px;
}
#logo a:hover {
    color: #FFFFFF;
}
#nav {
    float: right;
    line-height: 50px;
    width: 600px;
}
#nav a:first-child {
    margin-left: 0;
}
#nav a:last-child {
    margin-right: 0;
}
#nav a:link, #nav a:visited {
    color: rgba(255, 255, 255, 0.9);
    font-family: "Mouse Memoirs",sans-serif;
    letter-spacing: 1px;
    margin-left: 10px;
    margin-right: 10px;
}
#nav a:hover {
    border-bottom: 2px solid #FFFFFF;
    color: #FFFFFF;
    padding-bottom: 1px;
}
#nav a.detect {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px 2px 2px 2px;
    color: rgba(0, 0, 0, 0.7);
    padding: 5px;
}
#nav a.detect:hover {
    color: #000000;
}
#content {
    font-family: "Mouse Memoirs",sans-serif;
    letter-spacing: 1px;
    margin-top: 70px;
}
.page {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    border: 1px solid green;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px;
}
.alert {
    background: none repeat scroll 0 0 #AD2E1D;
    border: 1px solid #911E0F;
    color: white;
    font-size: 20px;
    padding: 10px;
    text-align: center;
}
#categories {
    margin-top: 20px;
}
#categories h2 {
    color: rgba(255, 255, 255, 0.7);
    font-family: "Wendy One",sans-serif;
    font-size: 26px;
}
#categories a:link, #categories a:visited {
    background: none repeat scroll 0 0 white;
    color: black;
    padding: 3px;
}
#categories .block {
    line-height: 35px;
}

Answer 1

Move your div with id content outside of your header div.

It will solve your problem.