Menu
I am using Firefox and when I place two div elements side by side with a width totaling 100%, the right div is pushed to the next line. When they total 99%, everything works as intended.
Here is an example:
CSS
.body {
height: 100%;
width: 100%;
}
.left {
background-color: red;
width: 70%;
height: 100%;
display: inline-block;
}
.right {
background-color: yellow;
display:inline-block;
width: 30%;
height: 100%;
}
}
HTML
<body>
<div class="wrapper">
<div class="left">
d
</div>
<div class="right">
d
</div>
</div>
</body>
861
Because there's whitespace between them, as inline-ish elements. If you want to resolve this issue, numerous methods would work:
<div class="left">
<!-- content -->
</div><div class="right">
<!-- content -->
</div>
By placing our closing and opening tags side-by-side, we remove line-returns, spaces, and more. Unfortunately, it's a bit ugly and doesn't lend itself to being quickly discernible by perusing eyes.
Another approach is to remove the unintended white-space with HTML comments:
<div class="left">
d
</div><!--
--><div class="right">
d
</div>
Like the first option, this too leaves the code slightly messy, and means that each set of contiguous columns must be separated by an odd and out of place HTML comment.
Both of the two aforementioned approaches should give you some maintainability concerns. If you were to come into a project and noticed markup like this, you may try to improve the formatting, remove seemingly pointless comments, and overall try to improve code-readability.
It's better to take an approach that doesn't require odd markup:
<style>
.wrapper {
overflow: auto; }
.column {
float: left;
display: block; }
.left {
width: 70%; }
.right {
width: 30%; }
</style>
<div class="wrapper">
<div class="left column">
d
</div>
<div class="right column">
d
</div>
</div>
The above uses floated block elements. Block elements don't permit whitespace to either side, thus removing our pesky issue. Floated elements however do implicitly mess up the layout of their parent container. To ensure these remain within their parent container, we set the parent's overflow property.
This markup is already in your solution, and doesn't include any conventions or approaches that could be mistaken at a later time.
Understanding the Box Model
One last caveat to the approaches above; you should make sure that the overall width of your elements is not affected by padding, and borders. In modern browsers, this isn't often an issue, but for legacy support it's wise to set the box-sizing property on these elements:
.wrapper, .column {
box-sizing: border-box;
}
Documentation: http://docs.webplatform.org/wiki/css/properties/box-sizing
One final solution is to avoid floats, inline-blocks, and everything that comes with them entirely. Modern browsers support Flexbox, which is built specifically for this time of problem.
Using your current markup, the following CSS will give you two columns:
.wrapper {
display: flex;
}
.column {
flex: 1;
}
.left {
flex-basis: 70%;
background: red;
}
.right {
background: blue;
}
This syntax will need some adjustments for earlier versions of Chrome which supported prefixed properties, and Internet Explorer 10 which supported a draft implementation of the standard.
You can see a demo here: http://codepen.io/anon/pen/skIeg
66
The white space counts on inline-block elements.
You can comment that out. See here for hint: http://jsfiddle.net/abhitalks/VTUt2/1/
<div class="left">
d
</div><!--
--><div class="right">
d
</div>
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
