Achieve table cell effect with floated divs

If I try to apply min-width, max-width to a floating div so that it expands to max-width when the right content is hidden does not work.

But, if I use table and 2 tds in it, the left td will expand to 100% if the right td is hidden.

Can I achieve this开发者_运维问答 table effect with floated divs?

I don't think you can do what you are asking, but you can make it look like what you are asking.

Make it into two tds and put a max-width on a div inside the td. Would that work?

This isn't going to work with floats. Luckily we now have more tools at our disposal.

Here are two very simple methods to expand a div to 100% of the available width if a sibling horizontally to it is hidden or removed.

#1 – Using display: flex

Compatibility: Edge and all modern browsers. IE 10 and 11 support the non-standard -ms-flexbox.

The Basic Markup

<div class="container">
  <div>
    First Column
  </div>
  <div>
    This second column can be hidden or not exist and the first column will take up its space
  </div>
</div>

The CSS

• The container div is given display: flex.

• The containers children are give flex: 1 and they will be assigned equal width, can grow and can shrink.

.container {
  width: 500px;
  display: flex;
}

.container>div {
  flex: 1;
  background: #FF6961;
  height: 200px;
  margin-bottom: 20px;
}

.container>div:nth-child(even) {
  background: #006961;
}

<div class="container">
  <div>
    Content
  </div>
  <div>
    Content
  </div>
</div>

<div class="container">
  <div>
    Content takes up the whole width when other divs are hidden.
  </div>
  <div style="display: none">
    Content
  </div>
</div>

<div class="container">
  <div>
    Content takes up the whole width when there is no other div.
  </div>
</div>

Read this guide to flexbox

Read more about flexbox on the MDN

#2 – Using display: table

Compatibility: IE8+ and all modern browsers

The Basic Markup

<div class="container">
  <div>
    First Column
  </div>
  <div>
    This second column can be hidden or not exist and the first column will take up its space
  </div>
</div>

The CSS

• The container is given display: table
• The containers children are given display: table-cell and will act the same as cells in an HTML table. If a cell is hidden or is removed the other cell will take its space.

.container{
  display: table;
  width: 600px;
  margin: 20px;
}

.container>div {
  display: table-cell;
  height: 200px;
  background: #FF6961;
}

.container>div:nth-child(even) {
  background: #006961;
}

<div class="container">
  <div>
    Content
  </div>
  <div>
    Content
  </div>
</div>

<div class="container">
  <div>
    Content takes up the whole width when other divs are hidden.
  </div>
  <div style="display: none">
    Content
  </div>
</div>

<div class="container">
  <div>
    Content takes up the whole width when there is no other div.
  </div>
</div>

<div class="container">
  <div>
    Content takes up the remaining width if a cell has a fixed width.
  </div>
  <div style="width: 200px">
    Content
  </div>
</div>

Read more about CSS tables on the MDN