CSS 3 Column Liquid Layout Dynamic Same Height Column

CSS 3 Column Liquid Layout Dynamic Same Height Column

You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.

Check out this fiddle for an example:

http://jsfiddle.net/kLMtb/

Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.

And take a look at this for an explanation of css table display properties:

http://ajaxian.com/archives/display-table

Dynamic 3 Column Layout in HTML+CSS: Side Columns Equal & Maximal, Middle Column Minimal & Driving the Layout?

If you put the three divs in one container with 'display:flex' you can achieve what I think you're after.

Simply give 'left' and 'right' a 'width: 100%' so they stretch as far as they can with the same proportion and the middle one gets only as big as needed. (If you want another ratio at a different time - maybe the right one should be twice as big as the left - simply put 100% and 200% width - the width might be bigger than 100% and like that it's really easy to calculate the ratio)

Notice that if you have more than one word, the lines would break. To prevent this I put 'flex-shrink: 0' on the middle one (alternative would be 'white-space: nowrap'). If it's just one word or the line break is what you want, you can even leave these.

#wrapper {
  display: flex;
}

#wrapper>* {
  border: 1px solid teal;
}

.left,
.right {
  width: 100%;
}

#middle {
  flex-shrink: 0;
  /* white-space: nowrap; */
}

<div id="wrapper">
  <div class="left"></div>
  <div id="middle">two words</div>
  <div class="right"></div>
</div>

How to make 3 li columns with variable height content the same height

For IE7?

And Pure CSS?

And All Row 1 (Div "one") Equal Height?

And all Columns Equal Height?

The answer is... Not possible.

Dynamic grid, make fluid boxes same height

You can fix this using flexbox. I'm quite fond of flexbox myself :)
Just remember, if your target audience will use IE8 or older, that you can't use this.

.container {  width: 400px;  margin: 32px auto;}.row {  border: 1px solid red;  display: flex;  width: 400px;  flex-wrap: wrap;  justify-content: space-between;}.col {  box-sizing: border-box;  padding: 10px;  border: 1px solid black;  margin: 5px;  width: 30%;}

<div class="container">  <div class="row">    <div class="col">COL1</div>    <div class="col">COL2 Text added to this column so height is different</div>    <div class="col">COL3</div>    <div class="col">COL4</div>    <div class="col">COL5</div>    <div class="col">COL6</div>  </div></div>

3-dynamic-width-column layout without tables

This is easily doable nowadays with flex-box.

Here you go. All your 3 requirements are met without a single use of the properties width or height. All containers adjust to their content.

body {text-align:center; font: 16px arial}wrap {display: inline-flex;  flex-direction: column; background: lightgrey;}header {margin-bottom: 10px; background: white; }footer {margin-top: 10px; background: white}content {display: flex; flex-direction: row-reverse}ctnr {display: flex;}centerCol {margin: 0 10px; background: green}rightCol {background: blue}leftCol {background: red}[pad] {padding: 10px; border: 1px solid black;}

<wrap pad><header pad>Header</header><content><ctnr><centerCol pad><br><br><br>Center column<br><br><br><br><br><br><br></centerCol><rightCol pad>Right</rightCol></ctnr><ctnr><leftCol pad>Left</leftCol></ctnr></content><footer pad>Footer</footer></wrap>

Three Column DIV layout dynamics; left = fixed, center = fluid, right = fluid

You can do this by using float:left for first column, float:right for the last column and making the center column float:none

Updated Demo: http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

---

NOTE: It is necessary to place your right column before your center column in HTML (see above, col3 comes before col2 in the HTML) to make sure that when the browser renders the center column, it knows how to render correctly around the existing floating elements.

---

Updated CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

Updated demo: http://jsfiddle.net/ew65G/1/

CSS - Equal Height Columns?

Grid

Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:

.row {  display: grid;  grid-auto-flow: column;  gap: 5%;}
.col {  border: solid;}

<div class="row">  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div></div>

Bootstrap: How to make columns equal height / dynamic amount of columns per row depending on device size

Used a flexbox for the container and edited the html a bit. Hope this works for you, please give me your feedback. Thanks!

snippet below:

.container {  display: flex;  flex-wrap: wrap;}.container .thumbnail {  margin: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">  <div class="col-sm-6 col-md-4 thumbnail">    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">    <div class="caption">      <h3>Sean Thomas</h3>      <p>Senior Designer</p>      <p></p>    </div>  </div>  <div class="col-sm-6 col-md-4 thumbnail">    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">    <div class="caption">      <h3>Sean Thomas</h3>      <p>Senior Designer</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>    </div>  </div>  <div class="col-sm-6 col-md-4 thumbnail">    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">    <div class="caption">      <h3>Sean Thomas</h3>      <p>Senior Designer</p>      <p></p>    </div>  </div>  <div class="col-sm-6 col-md-4 thumbnail">    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">    <div class="caption">      <h3>Sean Thomas</h3>      <p>Senior Designer</p>      <p></p>    </div>  </div>  <div class="col-sm-6 col-md-4 thumbnail">    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">    <div class="caption">      <h3>Sean Thomas</h3>      <p>Senior Designer</p>      <p></p>    </div>  </div>  <div class="col-sm-6 col-md-4 thumbnail">    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">    <div class="caption">      <h3>Sean Thomas</h3>      <p>Senior Designer</p>      <p></p>    </div>  </div></div>

---

Related Topics