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 Aleksandra Agosto
Aleksandra Agosto
2,125 Points

How to properly display divs side by side?

http://codepen.io/anon/pen/EblmK

So my divs (in the footer) do display side by side, but only if I have no borders. There's something weird going on where if I set both divs to 50% width AND apply a border, the second div goes under the first.

How do I fix this?

3 Answers

Andrew Shook
Andrew Shook
31,709 Points

On my iPhone ATM so going to keep this short. Watch this video and it will explain why you can display inline block with widths that add up to 100%.

Aleksandra Agosto
Aleksandra Agosto
2,125 Points

Thank you! Such a good video.

qdzfplofsk
qdzfplofsk
22,025 Points
qdzfplofsk
qdzfplofsk
22,025 Points

Basically you need to display them inline-block like so

div {
  display: inline-block;
}
Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Aleksandra,

The 50% width you're giving each of those divs is applied before adding the border...so the border is pushing each div to 50% + 1px (2px?) of its parent div. To fix this, add the following css:

.info, .connect {
    box-sizing: border-box;
}

This will push the borders and padding inside your total width...creating divs with exactly 50% the width of their parent divs.

Hope this makes sense!

Aleksandra Agosto
Aleksandra Agosto
2,125 Points

You're totally right! It's funny because I think I had just learned this last week but forgot. I haven't tested this but I'm pretty sure that'll solve it. Thank you!