Determine the Width of a Dynamic CSS3 Multicolumn Div Width Fixed Column-Width

Different width CSS columns

There is NO CORRECT way to set different column widths with CSS columns.

Why it won't work

column-width property only species the optimal width. The final output will be stretched or shrinked based on the available parent width. So it is not the right property to use when you need fixed or different column widths.
Ex:

div {
  width: 100px;
  column-width: 40px;
}

There is room for two 40px wide columns inside the 100px wide element. In order to fill the available space the actual column width will be increased to 50px.

div {
  width: 40px;
  column-width: 45px;
}

The available space is smaller than the specified column width and the actual column width will therefore be decreased.

Tweak

In case you have 2 columns, you can set a -ve margin-right to get different column widths. This works with more than 2 columns but is limited to just 2 widths.

Feasible Solution

You can use tables or display:table instead to achieve similar results.

Dynamic CSS multi-columns list inside a fixed width container

Like this?

#testDiv {}
ul {  display: flex;  flex-direction: column;  flex-wrap: wrap;  width: 200px;  height: 200px;  list-style-type: none;  padding: 0;  overflow: visible;}
ul li {  width: 100px;  height: 100%;  background: blue;}

<div id="testDiv">
  <ul>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>    <li>Testing</li>
  </ul>

</div>

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>

Three column layout, column width based on content, last column takes available space

CSS-Grid can do that. [View full screen]

Of course this is not responsive as the image width is auto and so does not adjust to screen size (unless you want to, which is another issue).

#container {
  width: 97%;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: max-content auto 1fr;
}

.part_one {
  vertical-align: top;
}

.part_two {
  margin: 0.3vw 0.2vw 0 0.1vw;
}

.part_two img {
}

.part_three {
  grid-row: 2;
  grid-column: 3;
}

<div id="container">            
    
        <span class="part_one">Some text, column accommodates text length,</span>
                
        <span class="part_two">
            <img src="http://www.fillmurray.com/284/196"><span class="comma">,</span>      
        </span>
                
        <span class="part_three">This section will only have text and fill available space left by previous text length and image width.  Positioned aligned to bottom of image, regardless of image height. All lines overflow and break like this when the text is long.</span>

</div> 

---

Related Topics