Setting div width to 100% minus certain amount of

Question

Have been searching the net for the past hours to find a solution to this, but couldn't find it, so here I am.

I need the width of the div to be 100% minus the width of the left div.

So that the div to the left of it stays the same width (390px) but the other div adjusts its size depending on the resolution . I have found the solution where it has a fixed width div on both sides, but just cant figure this out.

Answer 1

This type of calculation isn't currently supported in CSS (certainly not in Chromium 12/Ubuntu 11.04), but there is a calc() function defined in CSS 3, which would allow for this kind of behaviour, using simple mathematical functions:

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
  border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }

(Above example taken directly from the W3.org.)

My own (in-exhaustive) tests show:

+----------------+-------------------+
|  Browser       |  Ubuntu 11.04     |
+----------------+-------------------+
|  Chromium  12  |  Fails            |
|  Firefox  5    |  Fails            |
|  Opera  11.10  |  Fails            |
+----------------+-------------------+

The above results were obtained using the named browsers and a css calc() demo, the code of which is below:

HTML:

<div id="box">This is the box.</div>

CSS:

#box {
    width: calc(100% - 20%);
    background-color: #f90;
    font-weight: bold;
    color: #fff;
    line-height: 2em;
    text-align: center;
    margin: auto;
}

(If anyone would like to run the above test in the browsers on their platform, and supply the results, or edit them in to this answer, that would be much appreciated.)

As pointed out, by clairesuzy, in comments:

[Take] a look at caniuse it does work in Firefox if you use width: -moz-calc() but that's about it ;)

And, indeed, in Firefox 5 (Ubuntu 11.04) it does work (the other vendor prefixes don't appear to do anything for Opera or Webkit, though; sadly): Revised vendor-prefixed demo.

Reference:

• CSS3 Values and Units.

Answer 2

There really isn't a way of doing this with straight up CSS right now in browsers other FireFox (see the MDN docs). You could use javascript to do the same, but I'd suggest rethinking your layout.

EDIT: actually IE 9 can handle it as well, see MSDN docs. Yay for IE?

Answer 3

Maybe this is not directly related to the question but I had a similar problem to arrange items in a list. The fixed-width element is to the right of each item. I've managed to solve this with the following approach. The idea is to balance a positive padding-left with a negative margin-left, while the width is set to 100%:

.item {
  max-height: 40px;
}

.item-title {
  display: inline-block;
  height: 40px;
  width: 100%;
  margin-left: -70px;
  padding-left: 65px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* This one should be fixed-width. */
.item-params {
  width: 60px;
  height: 40px;
  float: right;
}

Answer 4

Simple solution:

<div id="content">
    <div class="padder">

    </div><!-- .padder -->
</div>
<div id="sidebar">
    <div class="padder">

    </div><!-- .padder -->
</div>

CSS:

div#content {
    float: right;
    width: 100%;
}

div#content .padder {
    margin-left: 330px;
    padding: 0 30px 0 0;
}

div#sidebar {
    float: left;
    width: 300px;
    margin-top: -30px;
    padding-left: 30px;
    margin-right: -330px;
}

This will allow you to have a fixed sidebar width and a full width content area. I have used it many times and it works like a charm.

Answer 5

<div id="left">...</div>
<div id="content">...<br> more content</div>

#left {float: left; width: 390px; background: #f76922;}
#content {overflow: hidden; background: #eee;}

float the left div and make a new block formatting context out of the right div (overflow: hidden is one way to do that), that way it will take the remaining space

Example Fiddle