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

Shay Paustovsky
Shay Paustovsky
969 Points
Posted by Shay Paustovsky
Shay Paustovsky
969 Points

Why "Inline-block" stack on top of each other, insted of aligning horizontally as columns ?

Hello,

So I'm trying to create columns using "inline-block" display mode.

This is my code: 

.container {
  width: 80%;
  height: 500px;
  background-color: aqua;
  margin: 0 auto;
}

#col1 {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  border: 1px dashed black;
}

#col2 {
  display: inline-block;
  width: 49%;
  border: 1px dashed black;
}

<!doctype HTML>
<html lang="en">
  <head>
    <title>Document</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="container">
      <div id="col1">
        <h2>Welcome</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ab excepturi id optio culpa explicabo alias ex fugiat qui debitis dolorum reiciendis, voluptatibus fugit reprehenderit ut perferendis voluptate voluptas nisi?
        </p>
      </div><!--Column 1-->
      <div id="col2">
        <h2>Guide</h2>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis expedita nihil labore dolor at laudantium accusantium atque minus, enim deserunt reiciendis illum, quis quae laborum cupiditate. Ad corporis omnis vel.
        </p>
      </div>
    </div><!--Container-->
  </body>
</html>

Each column's width is set to: 50% of the container so that they divide evenly, but insted they stack on top of each other and I have no other ideas, and I have tried everything.

Although when I set one's width to 49% it appears fine, Why?

Any help and explanation would be appreciated.

3 Answers

Natalie Cluer
Natalie Cluer
18,898 Points
Natalie Cluer
Natalie Cluer
18,898 Points

Hi there! The border on your columns is not included in the browser's calculation of the width of the columns. Therefore, when the border is added the width becomes more than 50%, and so the columns will not display side by side. There are two ways around this: you can make the width of the columns slightly less than 50%(i.e/ setting both to 48%, say) OR use the global selector to set box-sizing to border-box:

* {
box-sizing: border-box;
}

This will force the browser to include padding and border in its calculation of an elements total width and height

Shay Paustovsky
Shay Paustovsky
969 Points
Shay Paustovsky
Shay Paustovsky
969 Points

Hi Natalie,

How can I express my gratitude to you? You literally saved me I was playing with my CSS & HTML and didn't understand why the columns aren't lining up horizontally.

I totally forgot about the box-sizing property, and that it includes paddings and borders into calculation.

Thank you so much!

David Moorhead
David Moorhead
18,005 Points
David Moorhead
David Moorhead
18,005 Points

Thanks to Shay and Natalie for the code insights you both provided in here!

Conversations, like the one that's on this page, are such a surprise discovery, such a relief while reading the tips I'll likely need later on, and pages of conversations like this one are bookmarked as quickly as my fingers can reach the mouse!

Thanks, again.

David