Fixed block elements

Question

i try make some parts of page with "fixed" style. I have similar HTML:

<div class="container">
    <table class="frame">
    <tr>
        <td colspan="2">
            <div class="toolbar">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="left-panel">
                <ul>
                    <li>Test 1</li>
                    <li>Test 2</li>
                    <li>Test 3</li>
                    <li>Test 4</li>
                    <li>Test 5</li>
                </ul>
            </div>
        </td>
        <td>
            <div class="content-fluid">
                Lorem ipsum dolor sit amet,<br /> 
                consectetur adipisicing elit, sed <br />
                do eiusmod tempor incididunt ut labore<br />
                 et dolore magna aliqua. 
            </div>
        </td>
    </tr>
    </table>
</div>

And CSS:

<style type="text/css">
    .container {
        text-align: center;
    }

    .frame {
        border: none;
        border-collapse: collapse;
    }

    .frame td {
        vertical-align: top;
    }

    .toolbar {
        heigth: 40px;
        background-color: blue;
    }

    .left-panel {
        width: 150px;
        margin-top: 20px;
        background-color: yellow;   
    }

    .content-fluid {
        margin-top: 20px;
        margin-left: 10px;
    }
</style>

How make .toolbar and .left-panel fixed and center. I try add style fixed and negative margin. It works, but i dont think that this right solution. And i also use table for frame (i dont know how to center it in another way (.content-fluid should stretch)) and it looks ugly. sorry for my bad english :(

Answer 1

If you want to make your Table Center you can set ".Container" width to 100% and add "margin:auto" to your frame. Take a look at this: http://jsfiddle.net/KNdw5/

About your first question, would you please explain more?