Left div 200px width, content div the rest?

Question

body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 13px;
            }

            #wrapper {
                padding: 1px;
                margin: 0 auto;
            }

            #left {
                width: 200px;
                float: left;
                background: orange;
                position: fixed;
                text-align: center;
                padding: 2px;
            }

            #content {
                float: right;
                text-align: left;
                padding: 2px;
                width: ???;
                background: #F0F0F0;
            }

Hello again stackoverflow! I want to create a simple layout, with a menu width of 200px, and the content div that takes the rest of the width... But how can i do that?

I already searched on google and on other stackoverflow topics, but i couldn't find anything...

Greetings

Edit: I tried searching on goolge once again and i found an example of how it should look like: http://www.thesitewizard.com

But because he has some kinda strange div names i don't know what code he uses for what div...

Answer 1

You can work with float in combination with margin to achieve your desired result. To get what you want your HTML-structure should look similar to this:

<div id="wrapper">
    <div id="menu">place your content here</div>
    <div id="main">place your content here</div>
</div>

The minimum required CSS should look like this:

#menu { float: left; width: 200px; }
#main { margin-left: 200px; }

I added a demo on jsfiddle to show the results with the help of some background colors.