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
Kevin Silvestre
13,561 PointsHow to position
Hi. Ive been following the deep dive on CSS. and I am trying to design a website just to apply what I have learned. I am having trouble positioning one dive next to the other one. I tried with float but it did not work.
Here is a image http://imgur.com/u9mfzjl
The code is here
Kevin Silvestre
13,561 PointsYeah he is my code.
James Barnett
39,199 Points@Kevin - Rather than go through the extra step of saving a pen as a gist just share the link of the pen itself in the future. As the pen is an interactive demo and much more useful for troubleshooting than a the static text in a gist.
3 Answers
James Barnett
39,199 PointsYou didn't float any of your elements. Add this to you CSS .grid1, .grid2, .grid3, .grid4, .grid5 { float: left; }.
If you are fuzzy on how this works, I'd recommend you review the video here on Treehouse on floats
If after reviewing the video and working through the code challenge you are still confused then head over to learnlayout.com.
There's also a good explaination on floating elements in this tutorial on CSS positioning.
Kevin Silvestre
13,561 PointsOk. Thank you a lot. it fixed the problem although I don't know why. I guess I dont understand floats as I thought I did.
James Barnett
39,199 PointsIf you don't fully understand how floats works, my unsolicited advice is as follows ...
Being able to position elements on the page is most important part of CSS. I suggest read about CSS positioning and then you go through all of learnlayout.com.
I had my first ah-ha moment with CSS when I figured out how to do this using floats. No absolute positioning, that would be cheating.
Source: Piet Mondrian Composition II
Axelle Arens
4,370 PointsHello Kevin,
Do you have a wrapper for those two divs that are supposed to be side to side? It would be easier to help if we could see the exact code you tried. Care to show us?
Kevin Silvestre
13,561 PointsYeah here the code. no I dont have a wrapper.
Andi Wilkinson
26,822 Pointsyou may have floated them both to the left which is ok, but as a div is a block element you will need to get them to display inline too - try that
James Barnett
39,199 PointsJames Barnett
39,199 PointsGo over to codepen to and create a working demo to show us your issue.
Don't know how to use it? No problem!
Here's a quick guide on how to use codepen