Re: [css-d] 3 elements side by side
nov 11 2014 00:09 Tom Livingston tom...@gmail.com: What's your favorite, most reliable way to get 3 elements (block or inline-block) side by side (no gap between) to span the full width of their parent? And hopefully not leave a gap at all… If I have a fixed height of the subelements my fav is to position them absolutely and float the container acting as a positioning context. I don’t like CSS-Tables very much because you lose most of the fine control. But they have their place of course. Sometimes accepting you can’t control everything is very liberating a designer. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 3 elements side by side
Hello list, What's your favorite, most reliable way to get 3 elements (block or inline-block) side by side (no gap between) to span the full width of their parent? And hopefully not leave a gap at all... I'm struggling to rid myself of a nasty but tiny gap. Sorry, no link. Thanks in advance. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 elements side by side
You have flexbox, display:table-cell, display:inline-block, float:left. I prefer flexbox but most often use one of the display's and avoid float at almost all costs. Are you using inline-block and running into this: http://css-tricks.com/fighting-the-space-between-inline-block-elements/? On Nov 10, 2014 6:10 PM, Tom Livingston tom...@gmail.com wrote: Hello list, What's your favorite, most reliable way to get 3 elements (block or inline-block) side by side (no gap between) to span the full width of their parent? And hopefully not leave a gap at all... I'm struggling to rid myself of a nasty but tiny gap. Sorry, no link. Thanks in advance. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 elements side by side
On Nov 10, 2014, at 5:09 PM, Tom Livingston tom...@gmail.com wrote: Hello list, What's your favorite, most reliable way to get 3 elements (block or inline-block) side by side (no gap between) to span the full width of their parent? And hopefully not leave a gap at all... I'm struggling to rid myself of a nasty but tiny gap. Here is a few ways I do it Tom. Hopefully one works for you. [code] html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 / titleUntitled Document/title /head body div style=width:100%;height:20%;padding:0;display:table; p style=color:#fff;width:33.33%;height:100%;margin:0;padding:2%;display:table-cell;background-color:#000;position:relative;text-align:center;vertical-align:middle;paragraph/p p style=color:#fff;width:33.33%;height:100%;margin:0;padding:2%;display:table-cell;background-color:#000;position:relative;text-align:center;vertical-align:middle;paragraph/p p style=color:#fff;width:33.33%;height:100%;margin:0;padding:2%;display:table-cell;background-color:#000;position:relative;text-align:center;vertical-align:middle;paragraph/p /div brbr div style=width:100%;height:20%;padding:0;display:table; span style=background-color:#888;color:#fff;width:33.33%;height:100%;margin:0;padding:0;display:table-cell;position:relative;text-align:center;vertical-align:middle;span/span span style=background-color:#888;color:#fff;width:33.33%;height:100%;margin:0;padding:0;display:table-cell;position:relative;text-align:center;vertical-align:middle;span/span span style=background-color:#888;color:#fff;width:33.33%;height:100%;margin:0;padding:0;display:table-cell;position:relative;text-align:center;vertical-align:middle;span/span /div brbr ul style=width:100%;height:20%;padding:0;display:table; li style=list-style:none;color:#fff;display:table-cell;background-color:#cf0;width:33.33%;height:100%;position:relative;text-align:center;vertical-align:middle;list-item/li li style=list-style:none;color:#fff;display:table-cell;background-color:#cf0;width:33.33%;height:100%;position:relative;text-align:center;vertical-align:middle;list-item/li li style=list-style:none;color:#fff;display:table-cell;background-color:#cf0;width:33.33%;height:100%;position:relative;text-align:center;vertical-align:middle;list-item/li /ul /body /html [end code] Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 elements side by side
Thanks guys. I seem to always forget CSS tables... I'll give it a shot. I got some complicated transform hover effects that I need to play nice... On Mon, Nov 10, 2014 at 7:58 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Nov 10, 2014, at 5:09 PM, Tom Livingston tom...@gmail.com wrote: Hello list, What's your favorite, most reliable way to get 3 elements (block or inline-block) side by side (no gap between) to span the full width of their parent? And hopefully not leave a gap at all... I'm struggling to rid myself of a nasty but tiny gap. Here is a few ways I do it Tom. Hopefully one works for you. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
