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

György Varga
György Varga
19,198 Points
Posted by György Varga
György Varga
19,198 Points

Columns not working with

Hi!

If I am making the colums width to be sumed up 100% the second or at larger screens the third colum get lower. So in the two column layout if I make the primary column width 50% and the second too it will get below each other. If I am making the width: 40-50 it works.

Can you please help me? https://w.trhou.se/l2q8bd38l0 Thank you!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

For some reason, the snapshot you have posted here is entirely empty. There is a directory but no files. Can you please try recreating the snapshot and linking it again?

György Varga
György Varga
19,198 Points
György Varga
György Varga
19,198 Points

Thanks! I updated my post!!

2 Answers

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

hi, you have to delete your margin / paddings and you will be able use 50% and 50% but if you have border or shadow you will not be able use it, then just make both 49% hope you understand :smile: also use box-sizing :)

why ? because basing website have always Margin ( no padding ) in TOP and LEFT :) so just do

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
aroshinemunasinghe
aroshinemunasinghe
5,649 Points
aroshinemunasinghe
aroshinemunasinghe
5,649 Points

I dont understand what * comes from. I also got the same fimiliar so I set it to 40% then it worked..

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

"*" mean all tags in whole site get this properties you just cant give 50% and 50% without setting this settings because browsers have its own default margin or padding ... so with this you overwrite them :)