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