<p>I haven't played with CSS for too long a time and am without references at the moment. My question should be fairly easy but googling isn't bringing up a sufficient answer. So, adding to the collective knowledge...</p>

<pre><code>|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread &gt; crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|
</code></pre>

<p>That's what I'm wanting my layout to be. The heading anyways. I wanted sub-title to contain sub-left AND sub-right. What css rules do I use to ensure a div is bound by the attributes of another div. In this case, how do I ensure that sub-left and sub-right stay within sub-title?           </p>

Something like this perhaps...
```
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            #container
            {
                width:600px;
            }

            #head, #sub-title
            {
                width:100%;
            }

            #sub-left, #sub-right
            {
                width:50%;
                float:left;
            }

        </style>
    </head>

    <body>
        <div id="container">
            <div id="head">
                 #head
            </div>
            <div id="sub-title">
                #sub-title
                <div id="sub-left">
                    #sub-left
                </div>

                <div id="sub-right">
                    #sub-right
                </div>
            </div>
        </div>
    </body>
</html>
```
```