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

JJ T
JJ T
6,276 Points
Posted by JJ T
JJ T
6,276 Points

Alligning three columns next to eachother

Hey guys I wanted to create a simple webpage just to practice HTML & CSS. My idea was to put three columns next to each other. Each column represents my workout day. I made three columns but I just don't know how to put them next to each other.
I'd really appreciate it if someone could give me some tips.

My snapshot https://w.trhou.se/1zhc614hxl

2 Answers

Karan Nahar
Karan Nahar
16,157 Points

Here is your solution. I have included both float and flexbox approach in the css file. Snapshot : (https://w.trhou.se/ox6hatdvk9).
Revise the CSS layout basics course. Your understanding will improve further.

JJ T
JJ T
6,276 Points
JJ T
JJ T
6,276 Points

Thx!

But can you maybe explain what steps you took. Because the problem with me was that I just didn't know where to begin. Do you have like steps that you take whenever you try to tackle such challenges?

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

you have 1500+ points in CSS you already should now it whot about using some existing GRID systems like FLEXbox or bootstrap or W3C ....

Flex is in css3 

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

also check this 

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • row (default): left to right in ltr; right to left in rtl
  • row-reverse: right to left in ltr; left to right in rtl
  • column: same as row but top to bottom

  • column-reverse: same as row-reverse but bottom to top

  • nowrap (default): all flex items will be on one line

  • wrap: flex items will wrap onto multiple lines, from top to bottom.

  • wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

this helps you more then tell you just code: https://teamtreehouse.com/library/css-flexbox-layout https://teamtreehouse.com/library/css-layout-basics