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

Flexbox? That's exactly what I need! Why didn't i find any documentation on such a thing yet? (probably because it's new and I didn't know the name for it).

Calc() doesn't fully cover it, since you need to fill in the with of the left div element too. It shouldn't be neccesary and it isn't with flexbox from what I understand.

Aren't there any add-ons I could send along with the page, so flexbox works in older browsers too?

-Rik

On 18 apr. 2012, at 17:13, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

> 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 Thursday, 19 April 2012 00:20:37 UTC