0

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>
Oriol
  • 274,082
  • 63
  • 437
  • 513
flasshy
  • 111
  • 1
  • 11
  • look up float or absolute positioning – Rooster Jan 13 '15 at 23:13
  • 1
    possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Oriol Jan 13 '15 at 23:17
  • @flasshy the issue is the whitespace caused by inline-block so, have a look: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – dippas Jan 13 '15 at 23:17
  • I apologize, Oriol. I'll look at that thread, too. – flasshy Jan 13 '15 at 23:24

3 Answers3

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.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Thank you! I wasn't aware that white spaces count in this case. If I use float:left and float:right, I'd have to make those DIV's display:inline then can't set height and width. Sorry if this question is dumb. I'm still learning layouts with DIV's. – flasshy Jan 13 '15 at 23:23
  • 1
    @flasshy No you *don't need* to make them inline. Why would you? – Roko C. Buljan Jan 13 '15 at 23:26
  • Because...I'm still getting a full grasp on layouts with DIV's? Haha I thought I knew but I'm not 100% there. I thought float was just another attribute to use in addition to display. – flasshy Jan 13 '15 at 23:30
  • @flasshy I really don't understand your comments. Added TWO demo links in my answer for you (since you're lazy ;) ) to preview what I tried to explain :) Happy coding! – Roko C. Buljan Jan 13 '15 at 23:33
  • I'm not lazy. I've been playing with code and searching on the web. I've been trying. Only now did I resort to asking here. All I said was that I thought display and float worked in unison. I now know they do not and I thank you for that clarification. – flasshy Jan 13 '15 at 23:41
0

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>
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

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>
imnancysun
  • 612
  • 8
  • 14