table 100 inside div - expands to screen width, not to div

Question

Lets see this layout:

<div style="float: left">
content1
</div>
<div style="float: left">
<table width="100%"><tr><td>dfsd</td></tr></table>
</div>

then the following happens: the table goes to new line, and will be as wide as the screen. But it should remain next to the previous div, and be as width as the 2nd div. How to workaround this?

EDIT: left column is fixed 200px width. The 2nd column should be 100%

Answer 1

I think you mean that the 2nd column should be 100% of the remainder of the page, correct?

Still, it depends on exactly what you're trying to achieve. You could create a surrounding table, if that makes sense for your content:

<table class="table_surround">
   <tr>
       <td class="col1">content 1</td>
       <td>(table here)</td>
   </tr>
</table>

.table_surround { width:100%; }
.col1 { width:200px; }

Or you could use absolute positioning:

<div style="position:absolute; left:0; width:200px;" >content 1</div>
<div style="position:absolute; left:200px; right:0;" >table here</div>

Here's another good option: Expand a div to take the remaining width

Answer 2

Give your DIVs some width... something like:

<div style="float: left; width: 25%;">
    content1
</div>
<div style="float: left; width: 75%;">
    <table width="100%"><tr><td>dfsd</td></tr></table>
</div>

Answer 3

By default, <div>s will be set to width: 100%; (bar default margins/padding) in CSS, you need to manually change it.

Floating left will do nothing when there's no space to fit the other elements.