Setting the div width to 100% minus a certain number of pixels

Question

Over the past hours, web searches have searched for a solution, but could not find it, so I am here.

I need div width as 100% minus left div width.

So, the div left of it remains the same width (390px), but the other div adjusts its size depending on the resolution. I found a solution where it has a fixed div width on both sides, but just can't figure it out.

Answer 1

A 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 2

This type of calculation is not currently supported in CSS (of course, not in Chromium 12 / Ubuntu 11.04), but there is a calc() function defined in CSS 3 that would allow this behavior 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; } 

(Example above, taken directly from W3.org .)

My own (exhaustive) tests show:

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

The above results were obtained using the above browsers and 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 someone wants to run the above test in browsers on their platform and provide the results or edit them in this answer, it will be much appreciated.)

As stated, clairesuzy in the comments:

[Take a look at caniuse it works in Firefox if you use width: -moz-calc() but more on that;)

Indeed, it works in Firefox 5 (Ubuntu 11.04) (other vendor prefixes do nothing for Opera or Webkit, but unfortunately): Revised demo version with a vendor prefix .

Link:

• CSS3 Values ​​and Units .

Answer 3

 <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 create a new block formatting context from the right div (overflow: hidden is one way to do this), so it will take up the remaining space

Script example

Answer 4

There really is no way to do this with straightforward CSS right now in browsers of another FireFox (see MDN docs ). You can use javascript to do the same, but I would suggest rethinking your layout.

EDIT: in fact, IE 9 can handle this, see MSDN Docs . Yay for IE?

Answer 5

Perhaps this is not directly related to the question, but I had a similar problem for organizing items in a list. A fixed-width item is to the right of each item. I managed to solve this problem as follows. 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; }