DIVs and CSS layout not lining up, but why? - css

Question

I'm trying to layout a screen using div's and CSS. It's a simple layout at this point but I can't seem to get the div's to line up. I want one wrapper div with two div's within it: one aligned to the left and one aligned to the right. However, they end up on top of each other.
I know this question is simple. What am I missing here?
If I reduce the width of the right div to 60% it lines up right but shouldn't I be able to use 100% of the width of the parent div?
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>

Answer 1

Float left your children elements:
jsBin demo
#product_wrapper > *{float:left;}
Note that inline-block causes the inner elements to actually act like inline elements
where white spaces count!
SO another way would be to modify your HTML removing the NewLine separator:
jsBin demo
<div id="images_wrapper">
Foo content
</div><div id="content_wrapper">
^^-------------------------------------- no space here
Bar content
</div>
The third way (the worst one) is to set font-size to 0 for the parent (will remove logically the child's white-space gap since is now '0'); >> and than reset the font-size for children elements to px (cause em will not work since parent has 0).
But that's a good way to loose track of dynamic and responsive font sizes expecially if you use em and size inheritances.

Answer 2

The problem is the whitespace in the html, which occupies some space between the elements.
One way of fixing it is
#product_wrapper {
font-size: 0; /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
font-size: 16px; /* Reset to whatever vaue */
}
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
font-size: 0;
}
#images_wrapper, #content_wrapper {
font-size: 16px;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>

Answer 3

Use float:left instead of display:inline-block
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
float:left;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
float:left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>