CSS floats & Overlapping boxes

When you float an element you take it out of the flow of the DOM. To make it interact with Box One, you need to float Box One as well:

#a {
    background-color: #FFFFCC;
    float: left;
    padding: 10px;
    width: 190px;
}

Notice the width is specified, too. This is because you want to put both boxes in a wrapper and specify the width of it, too:

HTML

<div id="wrapper">      
    <h1>Title</h1>
    <nav class="r-set">
        <p><a href="#">Two</a></p>
    </nav>
    <div id="a">
        <h3>One</h3>
    </div>
</div>

CSS

#wrapper{
    width: 445px;
}

Whenever you're floating elements it's a good idea to put them in a wrapper like this so you bring them back into the DOM, so to speak. This will avoid problems like you experienced with Box One rendering behind box 2.

Here's a jsFiddle bringing it all together. BTW, if you want Box Two to sit completely flush against Box One, take away its left margin.

---

EDIT:

To make Box Two static and Box One expandable you should use the same CSS and markup. Just take away Box One's float and width properties and give it a right-margin of 225px (the width of Box Two minus the right margin). Here's the updated jsFiddle.

Apply overflow: hidden; to the non-floating box.