Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,567 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,567 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.

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!