Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Omar Suriel
Omar Suriel
5,403 Points

boxes not fitting inside parent container

i have a container that is 1100px wide and 3 boxes inside of it, 2 are 395 px and one is 310, the middle box has 25px of padding on each side in order to make some space between them but for some reason the skip over to the next line. how do i solve this problem. please help.

* {
  box-sizing: border-box;
}

.container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0;
}

.boxes {
  display: inline-block;
  background: rgba(255,255,255,0.9);
  height: 330px;
  margin: 0 auto;
  border-radius: 10px;
}

.left_box,
.right_box {
  width: 395px;
}

.middle_box {
  width: 310px;
  margin: 0 25px;
}

<section id="main-area">
          <div class="container">
            <div class="left_box boxes"> </div>
            <div class="middle_box boxes"></div>
            <div class="right_box boxes"> </div>
          </div> <!-- End of .container -->
        </section><!-- End of #main-area -->
Dave Schenk
Dave Schenk
256 Points

I looked at this and I'm sorry but I don't understand why this is happening. You're getting an "extra" 4px space between your div's for no reason that I can see. A div has no default margin. If you take 4px off the margin for .middle_box and make it 21px it works fine.

1 Answer

Omar Suriel
Omar Suriel
5,403 Points

Thanks a lot! but I found the answer. I forgot that inline-block elements still have the spaces between them just like text. so Im just gonna use floats for now on when I to set elements next to each other without the extra space. Thansk a lot!