CODEWITHSUNDEEP
htmlcss
niclake
niclake

Reputation: 134

Flexible Last Column using CSS and divs

Working on a new site, and building our main page content to use dynamic columns with CSS. Here's a sample of the page:

<div class="maincols">
    <div class="maincol">Here's a column</div>
    <div class="maincol">Here's another column</div>
    <div class="maincol">This is my last column</div>
</div>

And here's the relevant CSS:

.maincol, .maincols { min-height: 1px; padding: 0; position: relative; }
.maincol { float: left; width: 25%; border-width: 1px; border-style: solid; border-color: #f00; padding: 0; }
.maincol:nth-child(4n) { margin-right: 0; }
.maincol:nth-child(4n+1) { clear: left; }
.maincol:last-child { float: right; text-align: center; }

So we get 4 columns per row (works), and it shoves the next batch to a new line (also works). Now, how do I get that final column to take up the entire remaining space on the line?

Currently looks like this:

| col1 | col2 | col3 | col4 |
| col5 |             | col6 |

And I need it to look like this:

| col1 | col2 | col3 | col4 |
| col5 |        col6        |

Or like this (if I add another batch of content):

| col1 | col2 | col3 | col4 |
| col5 | col6 |    col7     |

Suggestions?

Upvotes: 0

Views: 192

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105893

flex again ? 

.maincols {
  display: flex;
  flex-wrap:wrap;
  width:100%;
  border:solid;
  margin:1em 0;
}
.maincol {
  min-width: 25%;/* can grow wider */
  box-shadow:inset 0 0 0 1px  ;
}
.maincol:last-of-type {
  flex: 1;/* fills up whole room left */
  text-align:center;
}
<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">This is my last column</div>
</div>

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">This is my last column</div>
</div>

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">This is my last column</div>
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115045

Flexbox can do that

* {
  box-sizing: border-box;
}
.maincols {
  display: flex;
  margin-bottom: 1em;
  flex-wrap: wrap;
}
.maincol {
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid blue;
}
.maincol:last-child {
  flex: 1;
}
<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">This is my last column</div>
</div>

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's my last column</div>

</div>

Upvotes: 3

Related Questions