Question: How can I display a div of fixed width 800px and on the both sides (left and right) there should be auto adjusting divs. Till now I have tried using `float:left` on the left auto adjusting div , `widht:800px` on the center div and `float:right` on the auto adjusting right div , but it is not working.

This is what i am getting till now.
Note: the background of center div is black, all three divs are enclosed in container div which has background color of red.
![result](https://i.stack.imgur.com/WkfhQ.png)

HTML Code

```
<body>
        <div id="outerSideContainerLeft" style:"float:left">
        left

        </div>

        <div id="feedContainer">
        center
        </div>

        <div id="outerSideContainerRight" style:"float:right">
        right               
        </div>

</body>

```

CSS Code

```
div{
    display:inline-block;
}
#feedContainer{
    margin:0px;
    width:800px;
    background-color: black;
}

#outerSideContainerLeft
{
 background-color: blue;
 width: calc(49%-400px);
}

#outerSideContainerRight
{
 background-color: green;
 width: calc(49%-400px);
}

```

Answer: 
Try [this](https://jsfiddle.net/1369n74b/1/)

this is just using `inline-block` for the `display` and using the `calc` property for the width of the left/right boxes.

Keep in mind the left/right boxes will go under each other once the screen is too narrow. you can use media queries to change the layout so its responsive like [this](https://jsfiddle.net/1369n74b/2/)

The calc property basically calculates a value for you. The example I gave, you had a middle div with width 200px. So the right/left boxes need to be 50% of the entire width of window MINUS half the size of the middle box. 

so 50% of the window minus 100px, this will give them relatively the right amount of width so they fill in the line around the fixed width middle div.

Except, theres a weird margin when using inline-block, so I use 49% instead, to account for the margin.
You could try the new CSS3 flexbox.

Check out [this fiddle](https://jsfiddle.net/aqjadwnj/3/), and if it is what you're looking for, then I can elaborate.

Basically, your container needs this style:

```
display: flex;

```

Your left and right elements need these styles:

```
flex-grow:   1;
flex-shrink: 1;

```

And your middle element needs these styles:

```
flex-grow:   0;
flex-shrink: 0;

```

So, for HTML that looks like this:

```
<div class="container">
    <div class="left">We keep content here. Blah blah blah blah blah. Also, blah blah blah.</div>
    <div class="mid">This is a fixed size.</div>
    <div class="right">Some other content goes here.</div>

```

You would use CSS like this (see fiddle):

```
.container {
    color: white;
    background-color: red;
    padding: 1em 0;

    display: flex;
}
.left {
    background-color: blue;
    flex-shrink: 1;
    flex-grow:   1;
}
.mid {
    width: 600px;
    background-color: black;
    flex-shrink: 0;
    flex-grow:   0;
}
.right {
    background-color: green;
    flex-shrink: 1;
    flex-grow:   1;
}

```

Also see [this guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more information about flexbox. As a warning, it is not supported at all by older browsers.