CODEWITHSUNDEEP
csshtml
CainaSouza
CainaSouza

Reputation: 1437

Three fixed divs and one flexible

I have a div with four other divs inside. The last three ones have fixed width but the first one needs to resize horizontally.

Here is the code on jsfiddle with the CSS: http://jsfiddle.net/nsCzp/

I found some answers here but couldn't make it work.

<div _unidade="1" class="unidade">
    <div class="unidade nome media">Canoinhas</div>
    <div class="unidade orcado media">9944</div>
    <div class="unidade realizado media">8467</div>
    <div class="unidade link media">1/div>
</div>

Upvotes: 1

Views: 44

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

You could use display:table on the outer div, and display:table-cell on the inner ones. (and remove the floats completely)

.unidade {
    height: 40px;
    line-height: 40px;
    padding: 5px;
    text-shadow: 0 0;

    display:table;
    width:100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
.unidade .unidade{
    display:table-cell;
}

Demo at http://jsfiddle.net/gaby/nsCzp/2/

Upvotes: 1

Related Questions