Re: Width: the trouble of a fixed width div and a relative width

On Mon, Apr 16, 2012 at 1:20 PM, Rik <coolcat_the_best@hotmail.com> wrote:
> I ran into this problem multiple times. I want to have a two divs. One on
> the left side with a fixed width (like 150 px) and one on the right side
> with a variable width, like (a percentage of) the remaining width. I know
> there are work arounds for this problem, but it’s never a really easy
> solution (the best one I could find is the Holy grail by Matthew Levine). It
> would be much easier if I could use something like this:

calc() will work, as Barry suggests.

If there's a container around the two divs, you can use Flexbox to
make it really easy:

.container {
  display: flexbox;
}
.left {
  width: 150px;
}
.right {
  flex: 1;
}

And that's it.  The two divs will be laid out horizontally, and the
one on the right will stretch to fill the remaining space.

Flexbox is currently being implemented by all browsers, and should
probably be available unprefixed by the end of the year.

~TJ

Received on Wednesday, 18 April 2012 15:13:05 UTC