How to fill remaining width by percentage in responsive views?

Question

I have three boxes in the footer, divs floated left with equal width. The design is responsive, so I've sized each to 33%.

But I'd like to hide one for smaller screens, this means that only two remains (50% each). How can I make sure to fill the required space without the need to declare widths for every screen size?

To make it clear, I'd like the same behavior as table cells if one is deleted: every cell fits to equal width if table width is specified. But floated divs do not.

Answer 1

You can hide the last child and set the boxes to 50% width in this way.

.box {
  float: left;
  width: 33.3%;
}
@media (max-width: 768px) {
  .box {
    width: 50%;
  }
  .box:last-child {
    display: none;
  }
}

<div class="footer">
  <div class="box">
    Content1
  </div>
  <div class="box">
    Content2
  </div>
  <div class="box">
    Content3
  </div>
</div>

Answer 2

You could use either Flexbox position (on modern browser) or display: table-*; (supported everywhere since IE8)

Example: http://codepen.io/anon/pen/BNwXdb

---

Markup

<footer class="flexbox">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</footer>

<footer class="table">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</footer>

CSS

/* Using Flexbox */
.flexbox { display: flex; }
.flexbox div {  flex-grow: 1; }

/* Using display: table-* */
.table { display: table; width: 100%; }
.table div { display: table-cell;}


/* e.g. hide last column when viewport width <= 600px */
@media all and (max-width: 600px) {
    footer div:last-child {
        display: none;
    }
}

None of these methods require to set a width.

Answer 3

You can use CSS3 Flex. But it won't work in older IE.

#main {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}

@media only screen and (max-width:767px){ 
   #main div:last-child{display:none;}
}

<div id="main">
    <div style="background-color:coral;">RED</div>
    <div style="background-color:lightblue;">BLUE</div>
    <div style="background-color:lightgreen;">Green div with more content.</div>
</div>