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
Chris Ascencio
8,785 PointsHow to layout columns?
im having difficulty laying out my columns and making them look like the image below. Can someone tell me the best method to display to two columns side by side.
https://upload.wikimedia.org/wikipedia/commons/e/ef/Csschallenge4.png
view my project on code pen! http://codepen.io/CAAM95/pen/oXoVPx?editors=110
2 Answers
Saskia Lund
5,673 PointsHey Chris,
to achieve the desired layout, I modified your code a "tiny" bit.
Tricky part is to achieve same height columns in a fluid two columns layout. You can find your modified codepen here: http://codepen.io/SaskiaLund/pen/GJObJZ
I hope my code comments help you find your way
Jonathan Grieve
Treehouse Moderator 91,254 PointsFor displaying content side by side what I would suggest is displaying your elements inline in your CSS
display: inline
or taking them out of normal float and floating them to the left
float: left;
the latter of which can cause more problems than it solves sometimes But with inline display that means elements only take up the amount of space as the contain it contains so elements stack up horizontally rather than vertically.
Also you might want to think about wrapping all your elements in a containing div element so everything fits together nicely in one content area.