Div won't keep height attribute or center

Question

I'm working on a project right now and can't get my content area to center. I believe this is due to the main #content div not having a height when inspected in my browsers. I assign the height in my CSS in the #content but this div doesn't seem to keep the assigned attributes.

Here is a snippet of HTML that contains the #content div:

<div id="content">
    <div id="mainbox">
        <h1>title</h1>
        <h3>title</h3>
        <p>text</p>
        <ul>
            <li>Vivamus vestibulum nulla nec ante.</li>
            <li>Praesent placerat risus quis eros.</li>
        </ul>
    </div>
    <div id="relatedbox">
        <h1>Related</h1>
        <p>text</p>
    </div>
</div>

Then the condensed CSS code is:

#content {
    height: 500px;
    width: 825px;
    margin-left: auto;
    margin-right: auto;
}
#content #relatedbox {
    width: 200px;
    font-size: 10pt;
    background-color: white;
    margin: 1em 0.5em 1em;
    border: 3px solid #00824c;
    float: left;
}

I've tried quite a few things including "position: relative" (and absolute), which looked like the solution to many other similar issues. Doesn't fix mine however. The boxes render right but stick to the left hand side of the div.

Thanks in advance for any ideas or help!

EDIT (SOLUTION): I seem to have found a solution, although I'm not sure it is the best. In my HTML I literally just added the styling to the div itself and it picked it up. I can clear all my CSS code in the #content div but I need to keep the #content id because of some other dependencies. Thanks again for every ones help! The code that fixed it: <div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

Answer 1

Move the CSS from the file directly to the div like: <div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">