Menu
<!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 is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.
I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.
Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.
But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?
745
Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides. You'll have to declare display: inline-block in your CSS code. One common use for using inline-block is for creating navigation links horizontally, as shown below.
Yeah it works but someone already provided the same solution.
Inline element properties: The height of an inline element is the height of the content. The width of an inline element is the width of the content. The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS.
If you have a border or padding set for your divs, then you've created additional pixels that will prevent your divs from adding up to a 100% width. To fix this, make sure you've added box-sizing: border-box to the div's styles.
Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.
When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).
So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:
body{ margin: 0; /* removing the 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 is a few ways to fix that:
1. No space between those elements
body{ margin: 0; /* removing the 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 the 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 the parents font-size to 0, and then adding some value to inline-block elements
body{ margin: 0; /* removing the default body margin */ } .parent{ font-size: 0; /* parent value */ } .parent > div{ display: inline-block; width: 50%; font-size: 16px; /* some 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 a negative margin between them (not preferable)
body{ margin: 0; /* removing the 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 the 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 for the reference)
body{ margin: 0; /* removing the default body margin */ } ul{ margin: 0; /* removing the default ul margin */ padding: 0; /* removing the 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:
As @MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the 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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
