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 John Levy
John Levy
1,451 Points

How to align two boxes next to one another

I have two boxes and each box has a further two boxes and a image in them. My problem is I am trying to align them both next to one another but one of the main boxes (whitebox) is always higher than the other. I also find if I move one of the images or blue boxes up or down the other one also moves with it. How does this work as I have labeled them different names? I have attached my code below http://codepen.io/Johned22/pen/vKzAyd

Ryan Mayo
Ryan Mayo
23,604 Points

Try something like this: http://codepen.io/godamnzilla/pen/rLQLWL you will notice that I re-use the css styles on more than one item, also you can give any item more than a single class so you could have one class that controls the horizontal : ie img-wrapper (set to "inline-block" which lines things up like text in a sentance (across)) and a few selectors that are controlling individual heights (img-wrapper:nth-of-type($whatever_number) img) that add padding to the top to adjust the vertical height of each images.

So you see we make 3 boxes that are inline to handle the horizontal, then set the image inside to margin-left/margin-right auto to center the image in the box, then add margin-top to each image in a diff class to align them vertically.

start here: https://teamtreehouse.com/library/introduction-to-html-and-css

Jessica Port
Jessica Port
3,120 Points

Instead of using margins to place the block in a certain location, try using 

float: left;

or

float: right;

on each block, then you can use margins to create space between the boxes.