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 CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Huahua Jiang
Huahua Jiang
2,789 Points
Posted by Huahua Jiang
Huahua Jiang
2,789 Points

I can't put secondary and tertiary in one row

I'm trying a different layout than whats in the video. I'm trying to create a two column layout with .secondary and .tertiary div on same row.

This is the code I use in the media query: .tertiary, .secondary { width: 50%; } but it doesn't work for me. Any suggestions?

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Are you able to add some code to show what you are doing? It could be a few things ie. if there are margins etc.

bushaf
bushaf
34,523 Points

display: inline-block; box-sizing: padding-box; margin: 0; also set the width less then 50%, like 49.x% here's a codepen for you http://codepen.io/Bushaf/pen/ZpoJRR

Ella Ruokokoski
Ella Ruokokoski
20,881 Points

Did you check out the task in question Bozidar Siljanoski? there are three columns and the order of them is secondary>primary>tertiary. Interest of the solution. Is it possible to do solely with CSS?

bushaf
bushaf
34,523 Points

http://codepen.io/Bushaf/pen/ZpoJRR Here is updated pen using flexbox... And here's stack overflow link with two more answers http://stackoverflow.com/questions/220273/use-css-to-reorder-divs. One uses table layout which has more backward browser compatibility and the other uses jquery

2 Answers

Trent Christofferson
Trent Christofferson
18,846 Points
Trent Christofferson
Trent Christofferson
18,846 Points

make sure there is no margin or padding and try setting the display: inline-block otherwise you can't have them on the same line

izzy goldman
izzy goldman
12,542 Points
izzy goldman
izzy goldman
12,542 Points

Unfortunately By default there is a small margin on the right and left. Two options to fix it:

  1. style the margins to 0px;
  2. (which i prefer) is like what Guil mentioned in a previous video, to include the margins width in the calculation of the width: i.e. ``` col_1 { width: 48%; margin: 1%; } col_2 { width: 48%; margin: 1%; }
Total of 48 + 1 +1 (left & right) = 50%.