W3C home > Mailing lists > Public > www-style@w3.org > April 2012

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 18 Apr 2012 08:12:17 -0700
Message-ID: <CAAWBYDDc8ggm-Dm3i=q2Wc3w86HSya0tS-_fYyt1b49L8cucnQ@mail.gmail.com>
To: Rik <coolcat_the_best@hotmail.com>
Cc: www-style@w3.org
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:52 GMT