Btukfyl

CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.

Simply define the width of the first div, and then give the second a flex-grow value of 1 which will allow it to fill the remaining width of the parent.

.container{

    display: flex;

}

.fixed{

    width: 200px;

}

.flex-item{

    flex-grow: 1;

}

<div class="container">

  <div class="fixed"></div>

  <div class="flex-item"></div>

</div>

jsFiddle demo

Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.

I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block

<div style="display: inline-block">

   Content in column A

</div>

<div style="display: inline-block">

   Content in column B

</div>

You might or might not need to specify the width of the DIVs

You can use CSS grid to achieve this, this is the long-hand version for the purposes of illustration:

div.container {

    display: grid;

    grid-template-columns: 220px 20px auto;

    grid-template-rows: auto;

}



div.left {

    grid-column-start: 1;

    grid-column-end: 2;

    grid-row-start: row1-start

    grid-row-end: 3;

    background-color: Aqua;

}



div.right {

    grid-column-start: 3;

    grid-column-end: 4;

    grid-row-start: 1;

    grid-row-end; 1;

    background-color: Silver;

}



div.below {

    grid-column-start: 1;

    grid-column-end: 4;

    grid-row-start: 2;

    grid-row-end; 2;

}

<div class="container">

    <div class="left">Left</div>

    <div class="right">Right</div>

    <div class="below">Below</div>

</div>

Or the more traditional method using float and margin.

I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.

Don't put your styles inline in real life, extract them into a style sheet.

div.left {

    width: 200px;

    float: left;

    background-color: Aqua;

}



div.right {

    margin-left: 220px;

    background-color: Silver;

}



div.clear {

    clear: both;

}

    <div class="left"> Left </div>

    <div class="right"> Right </div>

    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>

<div style="margin-left: 220px; background-color: Silver;"> Right </div>

<div style="clear: both;">Below</div>

<div class="container" style="width: 100%;">

    <div class="sidebar" style="width: 200px; float: left;">

        Sidebar

    </div>

    <div class="content" style="margin-left: 202px;">

        content 

    </div>

</div>

This will be cross browser compatible. Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.

Give the first div a float left and fixed with, the second div 100% width an float left. That should do the trick. If you want to place items below it you need a clear:both on the item you want to place below

If you're not tagetting IE6, then float the second <div> and give it a margin equal to (or maybe a little bigger than) the first <div>'s fixed width.

HTML:

<div id="main-wrapper">

    <div id="fixed-width"> lorem ipsum </div>

    <div id="rest-of-space"> dolor sit amet </div>

</div>

CSS:

#main-wrapper {

    100%;

    background:red;

}

#fixed-width {

    width:100px;

    float:left

}

#rest-of-space {

    margin-left:101px;

        /* May have to increase depending on borders and margin of the fixd width div*/

    background:blue;

}

The margin accounts for the possibility that the 'rest-of-space' <div> may contain more content than the 'fixed-width' <div>.

Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.