can overflow: hidden; work with inline-blocks? - css

Question

I'm trying to put two divs with 50% width beside one another, they are inline-blocks.
The problem is, I also wish to add other elements that affect the width, such as margin, padding, borders, etc. I am quite alright to have a few pixels to be hidden off the side of the window. (In fact, I'd prefer it)
Whats the trick exactly?
How can I have two inline divs that don't stack on top of each other when they hit the maximum width of their parent. Is there some default positioning that inline-blocks have?
EDIT: Here is an example of code. It seems rather simple to me, but they just wont line up.
.parent {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
}
.child {
display: inline-block;
overflow: hidden;
position: relative;
width: 50%;
height: 100%;
margin: 1px;
}
<div class="parent">
<div class="child">content</div>
<div class="child">content</div>
</div>

Answer 1

The reason they won't stack is because you have set the margin to 1px and then the width to be 50% of the available width. So each child was in fact 50% + 1px + 1px (for left and right) in width which would exceed the available width of 100% by 4px.
Try either with padding, or margin, or reduce the width of the parents. You could also do:
width: calc(50% - 2px);
Also, the nature of inline-block makes it trickier to align elements next to each other if they add up to exactly (or near) 100%.
You can solve this by either setting the parent to have a font-size of 0 and the children to anything greater than 0. Or, you could set each child to float: left
Demo 1 (using floats)
Demo 2 (using floats, and calc())
Demo 3 (setting font-size to 0)

Answer 2

For padding and borders you can use box-sizing: border-box; on your child element.
border-box: "The width and height properties (and min/max properties) includes content, padding and border, but not the margin"
source: box-sizing
I think for margin you need to cut some space off your .children. For example: width: 49.5%; margin: 1%;

Answer 3

As Mike suggested, try to use box-sizing: border-box.it will work only if you specify padding instead of margin.
But in this case, even with padding and border-box, still you would not be able to place them side by side as inline-block elements create a small gap in between..
More you can find out https://css-tricks.com/fighting-the-space-between-inline-block-elements/
If you are ok with few pixels to be hidden off the side of the window, you can add white-space: nowrap; to the parent.
.parent {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
white-space:nowrap;
}
.child {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
margin: 1%;
}

Answer 4

For the record, these solutions seemed to be the most reliable:
width: calc(50% - 2px) (Worked with float: left;)
border-sizing: border-box; (Worked with border: 1px solid #fff;)
white-space: nowrap; (worked circumstantially.)
Thank you to everyone who has contributed.
This was the sort of clarity I was looking for. Knowing multiple ways to solve this issue is abundantly helpful.