css positioning 2 divs in a div

Question

i have a main div has 100% width, and 2 divs in it. one has 200px width and other will be 100%-200px, i mean;

  -----------------this is main div -------------
 |                                               |
 | ----subdiv1---- -------------subdiv2----------|
 ||              | |                            ||
 | --------------   ---------------------------- |
 |-----------------------------------------------|

subdiv1 has 200 px, subdiv2's width will be rest of empty space. I search on google but couldnt find.

Answer 1

Here's one possible solution I hacked up using a float: left rule for the left-most div, and a margin-left rule for the right div: http://jsfiddle.net/P4xMj/

Example HTML:

<div id="container">
    <div id="left">
        Some content here
    </div>
    <div id="right">
        Some more content goes over here on the right. Let's make this
        content really long to see what happens when we wrap more than
        one or two line's worth. Extra text to fill the void.
    </div>
</div>

Example CSS (the background colors are just for visibility):

#container {
    background: #FF0;
    overflow: auto;
    padding: 10px;
}

#left {
    background: #0F0;
    float: left;
    width: 200px;
}

#right {
    background: #F00;
    margin-left: 210px;
}