Two divs, one fixed width, the other, the rest

Question

I\'ve got two div containers.

Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I

Answer 1

If you can flip the order in the source code, you can do it like this:

HTML:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS:

.right {
  width: 250px;
  float: right;
}   

An example: http://jsfiddle.net/blineberry/VHcPT/

Add a container and you can do it with your current source code order and absolute positioning:

HTML:

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.

Example: http://jsfiddle.net/blineberry/VHcPT/3/

Answer 2

Use the simple this can help you

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>

Answer 3

There are quite a few ways to accomplish, negative margins is one of my favorites:

http://www.alistapart.com/articles/negativemargins/

Good luck!

Answer 4

See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?