CSS fluid box with 3 fluid Columns

Question

I have a div container which is fluid:

width: 97%;
min-height: 80px;
-webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
-moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
background: white;
margin-bottom: 20px;
margin: auto auto;
max-width: 880px;

And inside of this div I want a 3 column layout:

1. column is fixed width.
2. column is fluid width.
3. column is again fixed width.

And here for a better understanding what I try to get

The Code (https://jsfiddle.net/ukgvexsu/)

.post_wrapper {
  width: 97%;
  min-height: 80px;
  -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
  -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
  background: white;
  margin-bottom: 20px;
  margin: auto auto;
  max-width: 880px;
}
.post_image {
  background-position: center;
  min-height: 60px;
  width: 60px;
  border-style: solid;
  border-color: #91A9A7;
  border-radius: 3px;
  border-width: 4px;
  margin-top: 5px;
  margin-left: 5px;
  float: left;
}
.post_1 {
  float: left;
  min-height: 10px;
  background: red;
  margin-top: 5px;
  min-width: 10%;
  max-width: 70%;
  margin-left: 5px;
}
.post_2 {
  float: right;
  min-height: 10px;
  width: 110px;
  margin-top: 5px;
  border-left: 1px solid black;
  padding-left: 5px;
}
.post_datum {
  margin-top: 5px;
  margin-left: 5px;
  font-size: 12px;
}
.post_text {
  padding: 5px;
  min-height: 40px;
  font-size: 14px;
  margin-bottom: 3px;
  line-height: 18px;
  font-size: 14px;
  width: 70%;
}

<div class="post_wrapper">
  <div class="post_image"></div>
  <div class="post_1">
    <div class="post_datum"><a href="./index.php?act=profil&amp;id=960bd310d33a704d836f19e39f61f3e2">USER XXXXXX</a> - 01.02.2016 - 21:06 Uhr</div>
    <div class="post_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>

  </div>
  <div class="post_2">vxcvc</div>
  <div class="clear"></div>
</div>

Answer 1

You could try it like this :

<div class="LeftFixedWidth">
</div>
<div class="MiddleFluidWidth">
    <div class="MiddleContentWrapper">
        <!-- Put your content here -->
    </div>
</div>
<div class="RightFixedWidth">
</div>

and style it like this :

.LeftFixedWidth {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
}
.RightFixedWidth {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
}
.MiddleFluidWidth {
    padding-left: 200px;
    padding-right: 200px;
}

The padding value should be same according to the width of the fixed column

Answer 2

Fiddle: https://jsfiddle.net/bdc13xpj/1/

For this kind of layouts, you'll have to use the calc() function.

Pay attention to browser support: http://caniuse.com/#search=calc()

All you have to to is the fixed width to the side elements, and then use calc() to calculate the width of the middle div.

For example:

#middle-div-fluid{
  float: left;
  width: calc(100% - 100px - 30px); /*first and second width are examples*/
}

Answer 3

I think you can use the calc css3 function to achive this.

Here is the compatibility reference.

div{
  display:block;
  width:100%;
  float:left;
  background-color: #607D8B;
  padding: 10px;
  box-sizing: border-box;
}

span {
    display: block;
    float: left;
    border: 1px solid white;
    background-color: #3F51B5;
    height: 100px;
    box-sizing: border-box;
}

span.fixed_width {
    width: 30px;
}

span.fluid_width {
    width: calc(100% - (30px * 2));
    background-color: #2196F3;
}

<div>
  <span class="fixed_width"></span>
  <span class="fluid_width"></span>
  <span class="fixed_width"></span>
</div>

Answer 4

Please try this :

.post_wrapper {
    width: 97%;
    min-height: 80px;
    -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
    -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
    background: white;
    margin-bottom: 20px;
    margin: auto auto;
    max-width: 880px;
    display:table;
}

.post_image {
    background-position: center;
    min-height: 60px;
    width: 60px;
    border-style: solid;
    border-color: #91A9A7;
    border-radius: 3px;
    border-width: 4px;
    margin-top: 5px;
    margin-left: 5px;
    float: left;
}

.post_1 {
    float: left;
    min-height: 10px;
    background: red;
    margin-top: 5px;
    min-width: 10%;
    max-width: 87%;
    margin-left: 5px;
    display:table-cell;
}

.post_2 {
    float: none;
    min-height: 10px;
    width: 110px;
    margin-top: 5px;
    border-left: 1px solid black;
    padding-left: 5px;
    display:table-cell;
    vertical-align:top;
}

.post_datum {
    margin-top: 5px;
    margin-left: 5px;
    font-size: 12px;
}

.post_text {
    padding: 5px;
    min-height: 40px;
    font-size: 14px;
    margin-bottom: 3px;
    line-height: 18px;
    font-size: 14px;
}

<div class="post_wrapper">
  <div class="post_image"></div>
  <div class="post_1">
  <div class="post_datum"><a href="./index.php?act=profil&amp;id=960bd310d33a704d836f19e39f61f3e2">USER XXXXXX</a> - 01.02.2016 - 21:06 Uhr</div>
  <div class="post_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
  
  </div>
  <div class="post_2">vxcvc</div>
  <div class="clear"></div>
  </div>

Answer 5

Use flex. See this answer to find the solution. Here is the jsfiddle working.