Webmaster Forum / HTML, CSS, Scripts / CSS / June 2006

i'm getting very frusterated with this..i was hoping someone could tell
me what's going on.
here's the code..

<div id="main">
    <div id="header">
        <h1>mnbayazit</h1>
        <p>a journey into the mind of m. n. bayazit</p>
    </div>

    <div id="content">
        lorem ipsum... blah blah blah
    </div>

    <div id="nav">
        <h1>nav</h1>
        <ul>
            <li><a href="">blog</a></li>
            <li><a href="">forums</a></li>
            <li><a href="">calendar</a></li>
            <li><a href="">gallery</a></li>
        </ul>
        <h1>categories</h1>
        <ul>
            <li><a href="">life</a></li>
            <li><a href="">web design</a></li>
            <li><a href="">work</a></li>
            <li><a href="">starcraft</a></li>
            <li><a href="">programming</a></li>
        </ul>
    </div>
</div>

now all you really need to know is that "main" has a 5px solid red
border around it..

now in IE this border surrounds the entire page as expected, but in
Firefox it only surrounds the header, as if the first </div> is ending
it.  how can I fix this??