html - Two inline-block elements, each 50% wide, do not fit side by side in a single row -
<!doctype html> <html> <head> <title>width issue</title> <style type="text/css"> body { margin: 0; } #left { width: 50%; background: lightblue; display: inline-block; } #right { width: 50%; background: orange; display: inline-block; } </style> </head> <body> <div id="left">left</div> <div id="right">right</div> </body> </html> jsfiddle: http://jsfiddle.net/5ecpk/
the above code trying place #left div , #right div, side side, in single row. can see in above jsfiddle url, not case.
i able resolve issue reducing width of 1 of divs 49%. see http://jsfiddle.net/muksc/ . not ideal solution because small gap appears between 2 divs.
another way able solve problem floating both divs. see http://jsfiddle.net/vptqm/ . works fine.
but original question remains. why when both divs kept inline-block elements, not fit side side?
when using inline-block elements, there whitespace issue between elements (that space ~ 4px wide).
so, 2 divs, both have 50% width, plus whitespace(~ 4px) more 100% in width, , breaks. example of problem:
body{ margin: 0; /* removing default body margin */ } div{ display: inline-block; width: 50%; } .left{ background-color: aqua; } .right{ background-color: gold; }<div class="left">foo</div> <div class="right">bar</div>there few ways fix that:
1. no space between elements
body{ margin: 0; /* removing default body margin */ } div{ display: inline-block; width: 50%; } .left{ background-color: aqua; } .right{ background-color: gold; }<div class="left">foo</div><div class="right">bar</div>2. using html comments
body{ margin: 0; /* removing default body margin */ } div{ display: inline-block; width: 50%; } .left{ background-color: aqua; } .right{ background-color: gold; }<div class="left">foo</div><!-- --><div class="right">bar</div>3. set parents font-size 0, , adding value inline-block elements
body{ margin: 0; /* removing default body margin */ } .parent{ font-size: 0; /* parent value */ } .parent > div{ display: inline-block; width: 50%; font-size: 16px; /* value */ } .left{ background-color: aqua; } .right{ background-color: gold; }<div class="parent"> <div class="left">foo</div> <div class="right">bar</div> </div>4. using negative margin between them (not preferable)
body{ margin: 0; /* removing default body margin */ } div{ display: inline-block; width: 50%; margin-right: -4px; /* negative margin */ } .left{ background-color: aqua; } .right{ background-color: gold; }<div class="left">foo</div> <div class="right">bar</div>5. dropping closing angle
body{ margin: 0; /* removing default body margin */ } div{ display: inline-block; width: 50%; } .left{ background-color: aqua; } .right{ background-color: gold; }<div class="left">foo</div ><div class="right">bar</div> <hr> <div class="left">foo</div><div class="right"> bar</div>6. skipping certain html closing tags (thanks @thirtydot reference)
body{ margin: 0; /* removing default body margin */ } ul{ margin: 0; /* removing default ul margin */ padding: 0; /* removing default ul padding */ } li{ display: inline-block; width: 50%; } .left{ background-color: aqua; } .right{ background-color: gold; }<ul> <li class="left">foo <li class="right">bar </ul>references:
- fighting space between inline block elements on css tricks
- remove whitespace between inline-block elements david walsh
- how remove space between inline-block elements?
as @marcospérezgude said, best way use rem, , add default value font-size on html tag (like in html5boilerplate). example:
html{ font-size: 1em; } .ib-parent{ /* ib -> inline-block */ font-size: 0; } .ib-child{ display: inline-block; font-size: 1rem; }
Comments
Post a Comment