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

HTML

Charlie Thomas
Charlie Thomas
40,856 Points
Posted by Charlie Thomas
Charlie Thomas
40,856 Points

HTML Help! Grid positioning not working!

I have this code http://cdpn.io/EtJBs

But when the code is run the the div is below the div with the id upcoming but it should be next to it. Any help on how to move my two divs next to each other would be greatly appreciated.

Many Thanks, Charlie Thomas

2 Answers

Ankur Jain
Ankur Jain
4,395 Points
Ankur Jain
Ankur Jain
4,395 Points

Hi Charlie,

I'm not entirely sure how your grid.css is structured but I believe it looks like you're using the 960 grid. I modified your first div and removed the id of wrapper and changed the class from "wrapper" to "container_12"

Your updated code: http://codepen.io/anon/pen/ypLHn Grid CSS Used: http://960.gs/css/960.css

960.gs Demo: http://960.gs/demo.html

Charlie Thomas
Charlie Thomas
40,856 Points
Charlie Thomas
Charlie Thomas
40,856 Points

Thank you. One last thing on my new code: http://cdpn.io/jJIys Upcoming Events doesn't start on the same line as main. Is there anyway to fix this?

Many Thanks Charlie

Ankur Jain
Ankur Jain
4,395 Points
Ankur Jain
Ankur Jain
4,395 Points

You're using an H3 tag there, by default all block level elements have margin's assigned to them.

If you want to remove the top margin, all you have to do is remove the top margin from the H3.

hint: target the parent div ("upcoming") then the h3 so your rule only applies to that specific instance of H3

Try it out, and if you run into problems let me know I'll help.

Charlie Thomas
Charlie Thomas
40,856 Points
Charlie Thomas
Charlie Thomas
40,856 Points

Thank \you so much it all worked!

Many Thanks Charlie

Charlie Thomas
Charlie Thomas
40,856 Points
Charlie Thomas
Charlie Thomas
40,856 Points

Also if you have time could you help me center my navigation. http://cdpn.io/EtJBs

Ankur Jain
Ankur Jain
4,395 Points
Ankur Jain
Ankur Jain
4,395 Points

Sure not a problem, I've centered it for you.

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

I'm a bit short for time but take a look at "inline-block" - http://reference.sitepoint.com/css/display to give you a better understanding of what I did.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Is there any way you can put this in a codepen or something? That would help.

The first thing that comes to mind is using floats, and make sure they have enough room to site side by side if there is a container.

Charlie Thomas
Charlie Thomas
40,856 Points
Charlie Thomas
Charlie Thomas
40,856 Points

Sorry I'm new how do I put it in a codepen

Ankur Jain
Ankur Jain
4,395 Points
Ankur Jain
Ankur Jain
4,395 Points

Visit: http://codepen.io/pen/

Input your HTML in one tab, CSS in the other and select save.

Once you're done copy and paste the new URL here! (something like this: http://codepen.io/anon/pen/BJsCG)