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

Juan Luna
Juan Luna
11,483 Points
Posted by Juan Luna
Juan Luna
11,483 Points

Problem with layout in CSS

Hi, I am doing an exercise with CSS and I want a layout like this:

http://imgur.com/bU0elzN

But I don't know how to center the first two images, I use margin:0 auto for the third one but doesn't work for the first two, so I have this:

http://imgur.com/aYJFvYd

Any ideas? Thanks

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Juan,

The easiest way to do this would be to use some form of grid. You could use a float left and right along with left and right margins.

A grid would be my first choice, there are a few lessons on Treehouse on building a grid if your interested.

Hope this helps.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

If you post your html and css I can take a look for you.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Pav Cieslak
Pav Cieslak
808 Points
Pav Cieslak
Pav Cieslak
808 Points

Hi Juan,

u could enclose first two boxes within a wrapper, and asign a percentage or fixed width to them to fit the wrapper and float them left. Once done so set the bottom box to match the width od the wrapper located above and u should achieve a nice layout with two boxes sitting next to each other in the first row and one box below.

Dont forget about clearing both two floted elements by assigning the property to the bottom box within your css file.

Hope that helped without giving the obvious (code) solution. Try it and les us know how did it go!