css positioning 2 divs in a div - css

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;
}

Answer 2

You're going to want to add float:left; to your subdiv1. Here is a few lines of code that will produce what you have shown.
<div>
<div style="float:left;width:200px;background:#0F0">
SUBDIV1
</div>
<div style="background:#F00;">
SUBDIV2
</div>
</div>
In short, use float:left; on your subdiv1

Answer 3

You can float: left the left div, and have margin-left: 200px on the right div.
http://jsfiddle.net/SpxH9/
HTML:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS:
#container {
overflow: hidden;
}
#left {
float: left;
width: 200px;
}
#right {
margin-left: 200px;
}
There's another technique you can use, which is to replace margin-left with overflow: hidden. This is useful because you don't have to have the dimension in there twice, and it adapts to changes more easily.
For example, with 10px borders: http://jsfiddle.net/SpxH9/1/
#container {
overflow: hidden;
}
#left {
float: left;
width: 200px;
}
#right {
overflow: hidden;
}
If you try to do the same thing with the first technique I mentioned, you'll find that you have to manually calculate stuff: http://jsfiddle.net/SpxH9/2/ (and fixed: http://jsfiddle.net/SpxH9/3/)
Lastly, overflow: hidden on #container is used to contain the floats. You might wish to use clearfix instead.