- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 12 Jun 2013 12:37:03 +0200
- 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