W3C home > Mailing lists > Public > www-style@w3.org > June 2013

Re: ceil support for calculated units?

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 12 Jun 2013 12:37:03 +0200
Message-ID: <CAAWBYDDjrF_5P=cbYOBynsfncRe+0QVtOwxLJ0tAV0q0uda=KQ@mail.gmail.com>
To: Netmosfera <netmosfera@gmail.com>
Cc: www-style list <www-style@w3.org>
On Tue, Jun 11, 2013 at 7:24 AM, Netmosfera <netmosfera@gmail.com> wrote:
> I don't know if it was already suggested, but...
>
> <!-- let's say the window is 801px wide -->
> <div style="width:801px">
>     <div style="width:50%;background:red;float:left;">a</div>
>     <!-- annoying pixel line in the middle -->
>     <div style="width:50%;background:red;float:right;">b</div>
> </div>
>
> <div style="width:801px">
>     <div style="width:50%;background:red;float:left;">a</div>
>     <div style="width:ceil(50%);background:red;float:right;">b</div>
> </div>
>
> "width:floor(50%)" is the default behavior and it equals to write
> "width:50%" so it isn't really needed
>
> I haven't more use cases, do you have any, especially for newer layout
> modules?

What Simon said.  Rounding isn't defined in CSS, and different
browsers use different heuristics to make situations like the one you
sketched work better.  The correct solution, though, is to use Flexbox
to make horizontal stuff, rather than floats and percentage widths:

<div style="width: 801px; display: flex;">
  <div style="flex: 1; background: red;">a</div>
  <div style="flex: 1; background: red;">b</div>
</div>

This solves your problem much more simply, and allows for a lot of
more powerful options as well.

~TJ
Received on Wednesday, 12 June 2013 10:37:50 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:12 UTC