On Nov 10, 2014, at 5:09 PM, Tom Livingston <[email protected]> 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" />
<title>Untitled Document</title>
</head>
<body>
<div style="width:100%;height:20%;padding:0;display:table;">
<p
style="color:#fff;width:33.33333333333333%;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.33333333333333%;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.33333333333333%;height:100%;margin:0;padding:2%;display:table-cell;background-color:#000;position:relative;text-align:center;vertical-align:middle;">paragraph</p>
</div>
<br><br>
<div style="width:100%;height:20%;padding:0;display:table;">
<span
style="background-color:#888;color:#fff;width:33.33333333333333%;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.33333333333333%;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.33333333333333%;height:100%;margin:0;padding:0;display:table-cell;position:relative;text-align:center;vertical-align:middle;">span</span>
</div>
<br><br>
<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.33333333333333%;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.33333333333333%;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.33333333333333%;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 [[email protected]]
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/
