Three fluid columns in a CSS flexible container

Question

Three fluid columns in a CSS flexible container

I need help with creating a fluid div container:

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;

Within this div, I aim to create a 3 column layout as follows:

Fixed width column.

Fluid width column.

Another fixed width column.

Here is an image for better visualization: https://i.sstatic.net/lsXxg.png

View the code here: 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>

html css

Answer 1

Answer №1

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

If you're working with layouts like this, the calc() function is your best friend.

Make sure to check browser compatibility: http://caniuse.com/#search=calc()

To achieve this, set fixed widths on the side elements and then use calc() to determine the width of the middle div.

Here's an example:

#middle-div-fluid{
  float: left;
  width: calc(100% - 100px - 30px); /*adjust according to your requirements*/
}

Answer 2

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

If you're working with layouts like this, the calc() function is your best friend.

Make sure to check browser compatibility: http://caniuse.com/#search=calc()

To achieve this, set fixed widths on the side elements and then use calc() to determine the width of the middle div.

Here's an example:

#middle-div-fluid{
  float: left;
  width: calc(100% - 100px - 30px); /*adjust according to your requirements*/
}

Answer 3

Answer №2

Consider implementing it in the following manner :

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

Then, apply this styling :

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

Ensure that the padding value aligns with the width of the fixed column

Answer 4

Consider implementing it in the following manner :

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

Then, apply this styling :

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

Ensure that the padding value aligns with the width of the fixed column

Answer 5

Answer №3

To achieve this, you can utilize the calc CSS3 function.

For compatibility reference, check out the link here.

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 6

To achieve this, you can utilize the calc CSS3 function.

For compatibility reference, check out the link here.

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 7

Answer №4

Give this a try:

.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 8

Give this a try:

.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 9

Answer №5

Employ the flex property. Refer to this response for the solution. View the working example on this jsfiddle link.

Answer 10

Employ the flex property. Refer to this response for the solution. View the working example on this jsfiddle link.

Three fluid columns in a CSS flexible container

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Utilize JavaScript to trigger a div pop-up directly beneath the input field

The body's width is more compact compared to one of my containers in HTML/CSS

Submitting a document on Android version 2.2.1 webview through an HTML form

A method to trigger the opening of a div tag when a button is clicked using Vue.js

What is the best way to choose all cells that begin, include, or finish with a specific term using JQuery/CSS?

javascript for each and every textarea

Enhancing Material UI icons with a sleek linear gradient

Switch up the box-shadow color with ColorThief!

Fade out a div with jQuery when hovered over, while preventing the links within the div

Ensure that a select input, dynamically generated, is marked as 'required' only when other inputs have been filled out

Ways to conceal ad container when ad space remains empty

Conceal an element from view upon clicking on it

ways to conceal the default icon in bootstrap navbar

The Django code snippet "if request.method == 'POST':" encounters an error

Enhance data table by displaying a set number of rows that do not completely fill the table's height

Need help with JQuery mouseOver fading in twice when you only want it to fade in

Signs that indicate you have reached the bottom of the page

Can images be accessed and displayed on an HTML page by opening a directory and reading file data using Javascript?

Utilize a SCSS class defined in one file within a different SCSS file

Can pagination numbers in Jquery DataTable be configured based on the total records returned by the server and the number of records chosen by the user?